CSS3のbox-shadowで影をつけてみる

CSS3のbox-shadowではdivやimgなどに影をつけることが出来ます。IEは非対応です。
例えば、こんなCSSを書いておいて

.shadow { box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 2px; }

タグのclassにshadowとつけるだけで次のような影が出来ます。

<div class="shadow">こんな感じ</div>

こんな感じ

値を分解して説明しますと
「 rgba(0,0,0, 0.5) 」　RGBカラーコード
「 rgba(0, 0, 0, 0.5) 」 影の透過度(1が無透過)
「 0px 0px 6px 2px; 」 影の位置(x,y)
「 0px 0px 6px 2px; 」 影のぼけている部分のサイズ, 影の広がりサイズ
あまり使いませんが、最後（;の前）にinsetとつけると内側に影が付きます。

.shadow { box-shadow: rgba(0, 0, 0, 0.5) 2px 4px 6px 2px; }

このように影の位置をずらすことも出来ます。
もっと影っぽくなりましたね。

こんな便利なジェネレーターもあるので活用させてもらいましょう。
CSS3 box-shadowジェネレーター