CSS でドロップシャドウをつける方法

CSS でドロップシャドウをつける方法を紹介します。
例えば、CSS で要素に影をつけたいときに便利な方法です。
類似機能のボックスシャドウと比べて、ドロップシャドウは擬似要素も対象になります。

1. ドロップシャドウを付ける方法
   1. ブラウザの対応状況
   2. box-shadow じゃだめなの？

ドロップシャドウを付ける方法

CSS で特定の要素にドロップシャドウを付ける方法を紹介します。
ドロップシャドウをつけるには filter プロパティの関数 drop-shadow を使用します。
実際の見た目はこんな感じです。

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

<div class="dropshadow">ドロップシャドウ</div>

CSS はこちら。

.dropshadow {

  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;

  -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

}

ドロップシャドウだけの記述はこちら。

.dropshadow {

  -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

}

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

ブラウザの対応状況

filter プロパティの関数 drop-shadow は、IE や Opera での表示に不安が残ります。
対応状況はこちらで確認できます。

box-shadow じゃだめなの？

影をつけるだけなら CSS セレクタの box-shadow でもよいのですが、
擬似要素を含むデザインの場合は、親要素と擬似要素と別々に影を付ける必要があります。
ちなみに、親要素だけに box-shadow を指定するとこんな感じ。

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

吹き出し下の三角形（擬似要素）に影がついていないのがわかるでしょうか。
ちなみに、三角形の作り方はCSS で三角形を作る方法で、
吹き出しの作り方はCSS で吹き出しを作る方法で紹介しています。

こう見ると、drop-shadow の方が優秀にみえるのですが、
box-shadow は inset（外側の影を内側に変更）とぼかしの広がり具合を指定できるので、
ブラウザーの対応状況も考えると、擬似要素を組み合わせて使わないときは box-shadow の方がいいかもしれませんね。

まとめ

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