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

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-shadowinset(外側の影を内側に変更)とぼかしの広がり具合を指定できるので、
ブラウザーの対応状況も考えると、擬似要素を組み合わせて使わないときは box-shadow の方がいいかもしれませんね。

まとめ

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