box-shadowを使用したデザイン

box-shadowを使用したデザイン

画面に立体感をもたらすシャドウ。デザインで最近シャドウを取り入れたサイトをよく見かけます。
そこでCSSで指定した要素に影をつける方法を紹介します。要素に影をつけるにはセレクタにbox-shadowを使用します。

基本的なHTMLとCSSは下記の通りです。
■html

■css
.shadow {
box-shadow: 1px 3px 5px 5px rgba(0, 0, 0, 0.2);
}

指定している各数値は左から、水平方向に1px、垂直方向に3px、ぼかしの具合に5px、ぼかしの広がりを5px、色（色+20%）を指定しています。
box-shadow ( 水平 垂直 ぼかしの具合 ぼかしの広がり 色（色+透明度） );

CSS で影を付ける方法は他にもfilterのプロパティのdrop-shadow でも影を付けることが可能です。
ただし、box-shadow で指定できる inset（内側の影）とぼかしの広がり具合を指定できません。