HTML

コピペで簡単 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 でボックスシャドウをつける方法をご覧ください。

合わせて読みたい関連記事