0

チャオ、

私はWebアプリに取り組んでおり、クリック可能なdivを取得しようとしています（これは<a href...>、線形グラデーションのcssで「display：block」というスタイルで実現しました。問題ありません...

次に、この中にアイコンを挿入したかったのですが、アイコンフォントを含む<a...>ものでそれを行いました<p>...これも問題ありません...

次に、同じブロック内の同じスタイルで、そのアイコン/フォントの下のcalibriにいくつかの異なるテキストを挿入しようとしました（「押された」ように見える内側の影が必要でした）。ここでは、これら2つの要素をほとんど揃えることができないため、結果に満足していません（スタイルを設定したので<p>、代わりに使用する必要があり<span>ますか？）。

例として、Facebookアプリのボタンと同様の効果を取得したいのですが、画像とテキストが垂直に配置されています

Facebook div / link

どうすればいいですか？ベストプラクティスは何ですか（アイコニックフォント+フォトショップでスタイル設定されたフォントまたは画像+ cssでスタイル設定されたフォント、または何ですか？）

PS：そして、そのリンク/ divの境界としての素敵な2行はどうですか、それらはどのようにスタイル設定されていますか？

4

1 に答える 1

0

私は最高だと思います-Photoshopでスタイル付けされた画像+ cssでスタイル付けされたフォント 線については、グラデーションとボックスシャドウで遊んでみてください。http://jsbin.com/esasan/1/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="main">
    <ul class="lines">
      <li class="line"></li>
      <li class="line"></li>
    </ul>
  </div>
</body>
</html>

.main {
  display:block;
  position:relative;
  width:150px;
  height:70px;
  background: #fcfcfd; /* Old browsers */
background: -moz-linear-gradient(top,  #fcfcfd 0%, #eaecf2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfd), color-stop(100%,#eaecf2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fcfcfd 0%,#eaecf2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fcfcfd 0%,#eaecf2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fcfcfd 0%,#eaecf2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fcfcfd 0%,#eaecf2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfd', endColorstr='#eaecf2',GradientType=0 ); /* IE6-9 */
   -moz-box-sizing: border-box; 
    box-sizing: border-box; 
  -webkit-box-sizing: border-box;
}

.lines{
  position:relative;
  width:150px;
  height:64px;
  margin-top:3px;
}

.lines li {
  display:inline-block;
  margin-top:4px;
}

.line {
  width:2px;
  height:60px;
  background: #9fa0a3; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #9fa0a3 0%, #f4f6fc 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#9fa0a3), color-stop(100%,#f4f6fc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #9fa0a3 0%,#f4f6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #9fa0a3 0%,#f4f6fc 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #9fa0a3 0%,#f4f6fc 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #9fa0a3 0%,#f4f6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fa0a3', endColorstr='#f4f6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  margin-right:60px; 
}
于 2013-03-17T00:33:53.647 に答える