Mac OS XのUIをbox-shadowで作成する
box-shadowの基本的な使い方が分かったところで、実践編に入ろう。まずは、Mac OS X風のUIをbox-shadowで再現してみよう。以下は、Mac OS Xの環境設定にある「言語とテキスト」の設定画面だ。灰色の枠で囲まれた拡大部分をよく見ると、ボックスの内側に影が付いている。
Mac OS Xの環境設定画面
この影を再現するには、insetを指定してボックスの内側にbox-shadow を適用する。サンプル4が実際のソースコードだ。ボックスの内側・垂直方向に1px の影を指定するだけで、立体的なデザインを実現できる。
■サンプル4[HTML]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>box-shadow アップル風 | ASCII 菊池崇のCSS3実践道場</title> </head> <body> <div> <p>アップル風のボックスのシャドウをCSS3のbox-shadow プロパティで実現する。<code>inset</code>を指定すればボックスの内側に影をつけることができる。</p> </div> </body> </html>
■サンプル4[CSS]
*{
margin : 0;
padding : 0; }
body{
font-family : sans-serif;
padding : 50px;
background : #ededed; }
div {
width : 360px;
height : 360px;
padding : 20px;
background : #e1e1e1;
-webkit-box-shadow : inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow : inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow : inset 0px 1px 3px rgba(0,0,0,0.4);
box-shadow : inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
border-radius : 3px; }
サンプル4の実行画面
