画像を使わずHTML要素とCSSでMacっぽい素敵ボタンを作ってみる
※Firefox限定で確認してますが、IE以外のモダンなブラウザであれば実現できるはず。
以下のエントリで紹介されていたので、box-shadowプロパティについて自分で理解するために、実際に試してみました。
Fun With Box Shadows « Markus Stange’s Blog
基本編
まずはbox-shadow(Geckoでは-moz-box-shadow)プロパティの基本から。
普通の影
-moz-box-shadow: 5px 5px black;
-moz-box-shadowの1番目,2番目のパラメータはオフセット値で、影の元になるboxのオリジナルの座標からx軸,y軸にどの程度ずらすかを表している。
上記の場合は、それぞれ5pxづつずらしているので、右斜め下に影が表示される。
輪郭がぼやけた影
-moz-box-shadow: 3px 3px 5px black;
オフセットに続けて数値を記述すると、ぼかし(blur)の大きさとして認識される。
大きく広がった影
-moz-box-shadow: 0 0 5px 5px black;
さらに続けて数値を記述すると、元のboxに対してどの程度影を拡大(spread)するかという値として認識される。
逆に小さい影
-moz-box-shadow: 0 5px 5px -3px black;
spreadの値にマイナスを指定すると、影が縮小される。
複数の影のレイヤーを合成
影の設定はカンマ区切りで複数指定でき、レイヤーが形成される。一番最初に記述したものがトップのレイヤーで、順番に後ろに追加されていくような感じになる。
-moz-box-shadow: 0 0 20px black, 10px 10px 30px yellow, -10px 10px 30px lime, -10px -10px 30px blue, 10px -10px 30px red;
応用編
透過する影
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
内側の影
-moz-box-shadow: inset 3px 3px 5px black;
内側と外側の影のコンビネーション
-moz-box-shadow: inset 3px 3px 5px black, 3px 3px 5px black;
Macっぽいボタンをつくる
box-shadowをborder-radiuusとかと組み合わせると、Macっぽい素敵なボタンが再現できます。
前述のサイトでは以下のようなボタンのデモが公開されてました。
Mac風ボタン完成形
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset,
0 0 1px #000000 inset,
0 10px 5px -5px #FFFFFF inset,
0 -20px 10px -10px rgba(255, 255, 255, 0.8) inset,
0 -13px rgba(0, 0, 0, 0.1) inset;
順を追ってボタンがどうやって実装されているか解説してみます。
まず、border-radisuプロパティで角を丸くする。※borderが無いので見えませんが、実際は角が丸くなってます。
-moz-border-radius: 50%;
Push!
下方向に薄く影を付ける。影を付けると角が丸くなっていることがわかると思います。
-moz-border-radius: 50%; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15)
Push!
ボタンの内側に沿ってうすく影を付ける。輪郭が見え、すこしボタンっぽくなってきます。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset /* 内側の輪郭に沿ってうすく影を付ける */Push!
ボタンの輪郭にぼかしを入れる。より輪郭がくっきりします。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset /* 輪郭にぼかしを入れる */Push!
さらにボタンの輪郭にぼかしを入れる。レイヤーを重ねて色を濃くしていくことで輪郭を強調しつつ自然なグラデーションになるように調整してる感じですかね。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset,
0 0 1px #000000 inset /* さらに少し濃い色のぼかしを入れる */Push!
ボタンの上の部分に明るいところを作る。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset,
0 0 1px #000000 inset,
0 10px 5px -5px #FFFFFF inset /* ボタンの上の明るい部分 */Push!
このままじゃ分かりにくいので、色を付けてみる。赤い部分が実際は白になってます。
Push!
ボタンの底に少し明るい部分を作る。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset,
0 0 1px #000000 inset,
0 10px 5px -5px #FFFFFF inset,
0 -20px 10px -10px rgba(255, 255, 255, 0.8) inset /* ボタンの底の少し明るい部分 */Push!
これも分かりにくいので色を付けてみます。赤い部分は実際は白になってます。
Push!
仕上げとしてボタンにツヤを出します。これで一気にMacっぽくなります。
-moz-border-radius: 50%;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 0 rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.8) inset,
0 0 1px #000000 inset,
0 10px 5px -5px #FFFFFF inset,
0 -20px 10px -10px rgba(255, 255, 255, 0.8) inset,
0 -13px rgba(0, 0, 0, 0.1) inset; /* 仕上げのツヤだし */Push!
前述のサイトでは、ボタンだけじゃなくいろいろなコントロールをHTML&CSSで再現してみせてました。
Webの進化ってスゴいなーって感じですね。
