見た目通りに影を落とせるcssプロパティfilter:drop-shadow

cssでオブジェクトに影をつける場合、画像や要素に影を付ける時はbox-shadow、テキストに影を付ける時はtext-shadowを使います。これらはコードのみで見た目に影をかけることができる便利なプロパティですが、css3ではあらたに影をつけるプロパティが存在します。それがfilter: drop-shadowです。

画像の透過部分に沿って落ちる影

filter:drop-shadowは正しくはfilterプロパティのdrop-shadow関数です。 使い方は基本的にbox-shadowと同じで、影の見た目を決めるパラメーターの指定方法も同じです。影のかかり方には差異があるので、見た目の調節はそれぞれ行う必要があります。
特徴的な違いは、box-shadowがbox要素に影を落とすものであるのに対し、filter:drop-shadowは要素の見た目通りに影を落としてくれるところです。以下の例を見てください。

See the Pen Drop-shadow vs box-shadow (3) en png´s by hoshu_t (@hoshu_t) on CodePen.

1つ目の画像にはbox-shadow、2つ目の画像にはfilter:drop-shadowがかかっています。2つ目の画像では、ロゴの見た目通りに影が落ちていますね。これがfilter:drop-shadowの効果です。

cssオブジェクトにも適応可能

filter:drop-shadowはcssで作ったオブジェクトに対しても影をつけられます。以下の例えを見てください。

See the Pen bs & ds by hoshu_t (@hoshu_t) on CodePen.

このように、cssで作った三角形に対して、オブジェクトに沿って影が付きます。

対応状況に注意

残念ながらcan I useのよると、この記事を書いている2018年7月現在で、IE11には対応していません。便利なプロパティなので、対応してほしいですね。

まとめ

影の落とし方の選択肢としてfilter:drop-shadowを覚えておくことで、状況に応じたcssを使いわけることができます。疑似要素を使ったアイコンやオブジェクトに装飾が必要になったときなど、活用してみましょう。