目標は、単一の画像ではなくCSS3を使用して、画像のようにボタンを作成することです
ボタンの作成プロセスと効果について一貫して話したいです。
すべての塩は詳細にあります
ポイントは、効果の組み合わせを使用して3次元オブジェクトを作成することです。 マイク・ランドルはインターフェイスの微妙さについて語っていますが 、これについてもう少しお話ししたいと思います 。 アイデアは次のとおりです。
- ボタンは表面にあります
- ボタンがわずかに上がっており、そのテクスチャは表面とは異なります
- テキストはボタンに「押され」ます
ボタンに使用されるHTMLは少々圧倒的ですが、詳細を掘り下げると意味が明確になります
<a class = "button" ><b class = "o" ><b class = "m" ><b>Post</b></b></b></a>
* This source code was highlighted with Source Code Highlighter .
それでは、スタイルを理解しましょう。
- 上部が明るくなる単純なグラデーションは、光源が上部にあり、ボタンの表面がわずかに盛り上がっていることを示しています。 1ピクセル幅の背景画像を使用します。
a.button bm {
background: transparent url(button.png) repeat-x 0 0;
}
- エッジの明るい境界線は光の反射です。 これにはCSS3 rgbaプロパティを使用します。 アルファブレンディングを使用するのは、 反射光は、下の方がはるかによく見えます。
- 光の上端からの光がより強く反射されることを示す、1pxの上部の境界線。
a.button bm {
border-width: 1px;
border-style: solid;
border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
- ボタンが表面上にあるという効果を作成するための1pxのより低い境界線。
a.button {
border-width: 1px;
border-style: solid;
border-color: transparent transparent rgba(255, 255, 255, 0.63);
}
- ボタンの周囲に1pxの境界線があり、表面にボタンの影が表示されます。 rgbaを再度使用する
a.button bo {
border: 1px solid rgba(0, 0, 0, 0.56);
}
- そして最後に、「印象」効果を作成するテキストの影
a.button bm b {
text-shadow: 0 1px 0 #DDD;
color: #262626;
}
さまざまなボタンの状態
ボタンに複数の状態がある場合に気に入っています。 ホバー状態を表示する最も簡単な方法は、ボタンの背景を明るくすることです。 押している状態の場合、浮き上がったボタンが表面に押し込まれていることを示す必要があります。 したがって、ボタンの照明はこれを示す必要があります。 以下に例を示します。
ボタンが「押された」ときは気に入っていますが、どこにも移動しません。 ボタンの形状を凸から凹に変更します
これをより詳細に検討してください。
- グラデーションを垂直に反転します。 グラデーションの暗い部分は、前の状態と比較して暗いため、 凸形状の下部に入射する光は、凹形状の上部に入射する光よりも強く反射されます。
a.button:active bm {
background-position: 0 -160px;
}
- ボタンの明るい上部の境界線は、ボタンの端が動かないことを強調しています。
- メインの境界線も移動しないため、下の境界線は明るくなります。
- メインの境界線も移動しないため、下の境界線は明るくなります
- 横方向のエッジは、表面と一緒に移動するため、わずかに軽くなります（ただし、それほどではありません）
a.button:active bm {
border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
以下はcssのほとんどですが、 ここに使用されるスプライトがあります。
a.button {
text-decoration: none;
border-color: transparent transparent #ECECEC; /** rgba fallback **/
border-color: transparent transparent rgba(255, 255, 255, 0.63);
cursor: pointer;
outline: none;
}
a.button:hover {
text-decoration: none;
}
a.button,
a.button bo,
a.button bm {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
display: block;
}
a.button bo {
border-color: #5A5A5A; /** rgba fallback **/
border-color: rgba(0, 0, 0, 0.56);
}
a.button bm {
background: transparent url(button.png) repeat-x 0 0;
border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover bm {
background-position: 0 -80px;
}
a.button:active bm {
background-position: 0 -160px;
border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button bm b {
display: block;
font-weight: bold;
padding: 4px 8px;
text-shadow: 0 1px 0 #DDD;
color: #262626;
/** Make the text unselectable **/
-moz-user-select: none;
-webkit-user-select: none;
}
オリジナル記事のデモ