Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年11月8日 Web制作

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


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

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

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

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

box-shadowの記述方法

基本的な記述方法は以下の通りです。
box-shadow: 水平方向 垂直方向 ぼかし 広がり 色 (外側か内側か);
ちなみに水平、垂直方法以外の値は省略可能です。
…それでは、それぞれの数値を変化させて挙動を見てみましょう。

サンプル(位置指定)

影を水平方向(右)に10px、垂直方向(下)に10px移動させました。
box-shadow: 10px 10px;
Dummy 負の値をセットすることも可能です。
box-shadow: -10px -10px;
Dummy

サンプル(ぼかし)

値を大きくするほどぼかしが強くなります。
box-shadow: 20px 20px 5px;
Dummy 30pxにするとこんな感じです。
box-shadow: 20px 20px 30px;
Dummy

サンプル(広がり)

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

サンプル(色)

影には色を付けることが出来ます。
下のサンプルは黒(透過度50%)の影です。
box-shadow: 20px 20px 5px 2px rgba(0,0,0,0.5);
Dummy ちょっと濃い目の影。
box-shadow: 20px 20px 5px 2px rgba(0,0,0,0.8);
Dummy 赤い影。
box-shadow: 20px 20px 5px 2px rgba(255,0,0,0.8);
Dummy 透過度を指定しないなら「#000000」のような書き方でもOK
box-shadow: 20px 20px 5px 2px #f00;
Dummy

サンプル(内側の影)

ここでちょっとトラブル発生。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のみで画像にお洒落なエフェクトを掛けたりすることも出来ます。
今回は「基本編」って形で書いたので、次は「応用編」の記事を書きます…
関連するかもしれない記事