【HTML & CSS】 box-shadowプロパティでボックスに影を付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

border-radiusプロパティで角を丸くする方法に続いて、次はボックスに影を付ける方法です。

ボックスに影を付ける

box-shadow: 横オフセット 縦オフセット [ぼかし幅]  [影の広がり]  [inset]；
[]は省略可能です。
[影の広がり]を指定しない場合は影のサイズはボックスのサイズと同じになります。正の値を指定すると全方位に影が拡大されます。反対に負の値を指定すると影は縮小されます。
[inset]を指定すると影はボックスの内側に付きます。

box-shadow: 10px 20px;
横方向に10px、縦方向に20pxにずらした位置に影を付けます。


box-shadow: 10px 20px　5px;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5pxに設定します。


box-shadow: 0 0　0 10px;
影の広がりだけを10pxに設定すると、ボックスサイズより全方位に10px拡大された影が付きます。


box-shadow: 10px 20px 5px #aaaaaa;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5px、影の色をグレーに設定します。


box-shadow: 0 0 16px 5px #aaaaaa inset;
insetを指定してボックスの内側に影を付けます。
insetを指定した場合、影の広がりは正の値で縮小されるようになります。

box-shadowの各ブラウザ対応状況

box-shadowプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、

IE	IE9よりサポート
Chrome	Chrome10.0よりサポート
Firefox	Firefox4.0よりサポート
Safari	Safari5.1よりサポート
iOs	iOS5.0よりサポート
Android	Android4.0よりサポート

Android4.0以前、iOs5.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点ではスマートフォン向けにwebkitを使用する方がよさそうです。

というわけで、box-shadowの指定の仕方は下記のようになります。（※2014年7月時点）

.box{
 -webkit-box-shadow: 10px 20px 5px #aaaaaa;
 box-shadow: 10px 20px 5px #aaaaaa;
}

box-shadowの設定を簡単に作成するツール

たとえばコチラ CSS matic のような設定ツールを使うと、box-shadowの設定が簡単に作成・確認できます。