【CSS3】box-shadowの使い方を徹底的に覚えようと思う（基本編）

いい加減覚えないと… 流行りの「フラットデザイン」の影響か、最近のWebサイトって影を使ったデザインが減ってますよね（ロングシャドウデザインなんてのもありますが）
もちろん流行りに乗るのも大切ですが、影が死んだわけではありません。効果的に使えばデザインの幅をグッと広げることが出来ます。

というわけで、今日はCSS3から登場した「box-shadow」を徹底的に使ってみようと思います。

ベンダープレフィックスの話

まず最初に言っておきます。
box-shadowはCSS3で追加されたプロパティですが、最新のブラウザはベンダープレフィックスを付けなくてもしっかり表示されます。やったね！
ただ、古いブラウザまで対応させるならベンダープレフィックスは必須です。そこらへんはお好みで。

box-shadowの記述方法

基本的な記述方法は以下の通りです。 ちなみに水平、垂直方法以外の値は省略可能です。
…それでは、それぞれの数値を変化させて挙動を見てみましょう。

サンプル（位置指定）

影を水平方向（右）に10px、垂直方向（下）に10px移動させました。 負の値をセットすることも可能です。

サンプル（ぼかし）

値を大きくするほどぼかしが強くなります。 30pxにするとこんな感じです。

サンプル（広がり）

これはちょっと分かりづらいです。box-shadowを指定した要素の縦横の大きさに対する、影本体の大きさとでも言いましょうか？ これも負の値をセット可能です。画像よりも小さい影が生成されていますね。

サンプル（色）

影には色を付けることが出来ます。
下のサンプルは黒（透過度50%）の影です。 ちょっと濃い目の影。 赤い影。 透過度を指定しないなら「#000000」のような書き方でもOK

サンプル（内側の影）

ここでちょっとトラブル発生。img要素は普通の方法だと内側に影を付けられないようです…というわけで、下のサンプルは空のdiv要素を使っています。

内側に影を指定するときは「inset」を指定します。 もちろん内側でも位置指定やぼかし距離の指定が可能です。

おわり

基本的な使い方は以上です。これらを他のプロパティ等と組み合わせれば、CSSのみで画像にお洒落なエフェクトを掛けたりすることも出来ます。
今回は「基本編」って形で書いたので、次は「応用編」の記事を書きます…