CSSで要素にドロップシャドウ効果をつけるには「box-shadow」プロパティがよく使われていますが、画像やSVGデータで透明の背景部分がある場合に考慮されずにシャドウが適用されてしまいます。
そんな時にCSSのfilterプロパティにあるdrop-shadow()機能がとても便利です。box-shadowプロパティで対応できなかった透過のアルファチャンネル部分に沿ってドロップシャドウ効果をつけることができます。
今回はこのようなHTMLを例にあげてサンプルを見ていきます。まずはbox-shadowで適用するドロップシャドウ効果です。違いがわかるようにdiv要素と画像要素のjpg、png、svgと用意しました。
// HTML ※一部抜粋
<div class="box-shadow">box-shadowが適用されたdiv要素</div>
<img class="box-shadow" src="./sample.jpg" alt="JPG画像">
<img class="box-shadow" src="./sample.png" alt="PNG画像">
<img class="box-shadow" src="./sample.svg" alt="SVG画像">
// CSS
.box-shadow {
box-shadow: 4px 4px 6px 2px rgba(0,0,0,.5);
}
CSSではbox-shadowプロパティを設定し、値は下記の順番にセットしていき、それぞれの要素に適用させます。
・X軸方向のオフセット
・Y軸方向のオフセット
・シャドウの距離
・シャドウの広がり
・シャドウの色
・シャドウの適用位置（内側か外側か）
box-shadowプロパティで適用させたドロップシャドウ効果はこのような感じになります。シャドウのデザインはわかりやすいように調整しています。PNG画像とSVG画像では背景の透過部分があるもののシャドウ位置は画像の外側に適用されています。
div要素
そこで、filterプロパティのdrop-shadowでドロップシャドウ効果をつけていきます。同じようにdiv要素と画像要素に適用させていきます。
// HTML ※一部抜粋
<div class="drop-shadow">drop-shadowが適用されたdiv要素</div>
<img class="drop-shadow" src="./sample.jpg" alt="JPG画像">
<img class="drop-shadow" src="./sample.png" alt="PNG画像">
<img class="drop-shadow" src="./sample.svg" alt="SVG画像">
// CSS
.drop-shadow {
filter: drop-shadow(4px 4px 6px rgba(0,0,0,.5));
}
drop-shadow()関数には次の順番で値をそれぞれ設定していきます。box-shadowと似ていますが、いくつか使えないものがありますので注意が必要です。
・X軸方向のオフセット
・Y軸方向のオフセット
・シャドウの距離
・シャドウの色
filterプロパティのdrop-shadowでドロップシャドウ効果を適用するとこのような感じになります。透過部分に沿ってドロップシャドウが適用されているのがわかります。
div要素
filterプロパティのdrop-shadowを使った場合、IE11などのレガシーブラウザには対応していないので注意が必要です。IE11を対象外にするのであれば、box-shadowの代わりにfilterプロパティのdrop-shadowを使っても問題なさそうですね。
box-shadowはその名の通り、ボックス状でしかドロップシャドウ効果をつけることができませんでしたが、filterプロパティのdrop-shadowで対応することで、より柔軟な表現ができデザインの幅も広がりそうですね。
