
いい加減覚えないと…
流行りの「フラットデザイン」の影響か、最近のWebサイトって影を使ったデザインが減ってますよね(ロングシャドウデザインなんてのもありますが)
もちろん流行りに乗るのも大切ですが、影が死んだわけではありません。効果的に使えばデザインの幅をグッと広げることが出来ます。
というわけで、今日はCSS3から登場した「box-shadow」を徹底的に使ってみようと思います。
ベンダープレフィックスの話
まず最初に言っておきます。
box-shadowはCSS3で追加されたプロパティですが、最新のブラウザは
ベンダープレフィックスを付けなくてもしっかり表示されます。やったね!
ただ、古いブラウザまで対応させるならベンダープレフィックスは必須です。そこらへんはお好みで。
box-shadowの記述方法
基本的な記述方法は以下の通りです。
box-shadow: 水平方向 垂直方向 ぼかし 広がり 色 (外側か内側か);
ちなみに水平、垂直方法以外の値は省略可能です。
…それでは、それぞれの数値を変化させて挙動を見てみましょう。
サンプル(位置指定)
影を水平方向(右)に10px、垂直方向(下)に10px移動させました。
box-shadow: 10px 10px;

負の値をセットすることも可能です。
box-shadow: -10px -10px;
サンプル(ぼかし)
値を大きくするほどぼかしが強くなります。
box-shadow: 20px 20px 5px;

30pxにするとこんな感じです。
box-shadow: 20px 20px 30px;
サンプル(広がり)
これはちょっと分かりづらいです。box-shadowを指定した要素の縦横の大きさに対する、影本体の大きさとでも言いましょうか?
box-shadow: 20px 20px 0 10px;

これも負の値をセット可能です。画像よりも小さい影が生成されていますね。
box-shadow: 20px 20px 0 -10px;
サンプル(色)
影には色を付けることが出来ます。
下のサンプルは黒(透過度50%)の影です。
box-shadow: 20px 20px 5px 2px rgba(0,0,0,0.5);

ちょっと濃い目の影。
box-shadow: 20px 20px 5px 2px rgba(0,0,0,0.8);

赤い影。
box-shadow: 20px 20px 5px 2px rgba(255,0,0,0.8);

透過度を指定しないなら「#000000」のような書き方でもOK
box-shadow: 20px 20px 5px 2px #f00;
サンプル(内側の影)
ここでちょっとトラブル発生。img要素は普通の方法だと内側に影を付けられないようです…というわけで、下のサンプルは空のdiv要素を使っています。
内側に影を指定するときは
「inset」を指定します。
box-shadow: 0 0 40px 2px rgba(0,0,0,0.8) inset;
もちろん内側でも位置指定やぼかし距離の指定が可能です。
box-shadow: 20px 20px 40px 2px rgba(255,0,0,0.5) inset;
おわり
基本的な使い方は以上です。これらを他のプロパティ等と組み合わせれば、CSSのみで画像にお洒落なエフェクトを掛けたりすることも出来ます。
今回は「基本編」って形で書いたので、次は「応用編」の記事を書きます…
関連するかもしれない記事