CSS でボックスシャドウをつける方法

CSS でボックスシャドウをつける方法

CSS で影(ボックスシャドウ)をつける方法を紹介します。
例えば、Adobe Photoshop のようなドロップシャドウを CSS で再現したいときに便利な方法です。

  1. ボックスシャドウをつける方法
    1. 各値の詳しい説明
    2. ブラウザの対応状況
  2. filter の drop-shadow じゃだめなの?

ボックスシャドウをつける方法

CSS で特定の要素にボックスシャドウをつける方法を紹介します。
ボックスシャドウをつけるには CSS セレクタの box-shadow を使用します。
実際の見た目はこんな感じです。

ボックスシャドウ

ベースの HTML は次の通りです。

<div class="boxshadow">ボックスシャドウ</div>

CSS はこちら。

.boxshadow {
position: relative;
width: 240px;
margin: 0 auto;
padding: 15px;
font-size: 16px;
line-height: 1.3;
text-align: center;
letter-spacing: 0.05em;
background-color: #fff;
border-radius: 8px;
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

ボックスシャドウだけの記述はこちら。

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

指定している各数値は左から、影の水平方向垂直方向ぼかしの具合ぼかしの広がり(色+透明度)を指定できます。
box-shadow ( 水平 垂直 ぼかしの具合 ぼかしの広がり 色(色+透明度) );

各値の詳しい説明

ボックスシャドウは6個の値を設定することができます。
例えば、全部の指定を加えると次のようになります。

.dropshadow {
/* inset | offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: inset 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

カンマで区切ることでボックスシャドウを複数設定することも可能です。

ropshadow-double {
/* inset | offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2), inset 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
inset
はめ込む
要素に対してシャドウを内側に適用させます。
offset-x
水平
シャドウの水平移動距離を設定します。
offset-y
垂直
シャドウの垂直移動距離を設定します。
blur-radius
ぼかしの具合
シャドウのぼかしの具合を設定します。値がでかいほどシャドウがボケてゆきます。Adobe Photoshop の効果「ドロップシャドウ」で例えるなら「サイズ」の項目に当たります。
spread-radius
ぼかしの広がり
シャドウの広がり具合を変更できます。Adobe Photoshop の効果「ドロップシャドウ」で例えるなら「スプレッド」の項目に当たります。
color
シャドウの色を変更することができます。

ブラウザの対応状況

CSS セレクタの box-shadow は大体どのブラウザーも対応しているようです。
対応状況はこちらで確認できます。

filter の drop-shadow じゃだめなの?

CSS で影を付ける方法は他にもあります、たとえば filter プロパティの関数 drop-shadow でも影を付けることができます。
こちらは擬似要素を含めて影を付けることができるので、吹き出しのようなデザインに影をつけたい場合は、こちらを選択してもよいかもしれません。
ただ、box-shadow で指定できる inset(外側の影を内側に変更)とぼかしの広がり具合を指定できないのが難点です。
例えば、擬似要素を使った場合に、親要素に box-shadow を使うとこんな感じ。

ボックスシャドウ

そしてこちらが drop-shadow の場合。

ドロップシャドウ

吹き出し下の三角形(擬似要素)に影がついていませんね。
なので、box-shadow で擬似要素にも影をつけたい場合は、三角形に ::before を、影には ::after を使って表現する必要があります。
ちなみに、三角形の作り方はCSS で三角形を作る方法で、
吹き出しの作り方はCSS で吹き出しを作る方法で紹介しています。

まとめ

CSS で影(ボックスシャドウ)をつける方法を紹介しました。
ドロップシャドウで影をつける場合はCSS でドロップシャドウをつける方法をご覧ください。