【CSS】png画像に影（box-shadow）をつける方法

WebデザイナーならおなじみのCSS「box-shadow」。
ほんのり立体感をつけたいときに便利ですよね。
だけど画像にbox-shadowをかけたい時、思ったようにかからないことがあります。
今回はその解決方法についてご紹介します。

まずはbox-shadowの基本をおさらい

右と下に4pxの影をつける

.box{ box-shadow:4px 4px 4px #aaa; }

左から「横方向、縦方向、ぼかし、色（カラーコード）」となっています。

左と上に4pxの影をつける

.box{ box-shadow:-4px -4px 4px #aaa; }

マイナスをつければ逆方向への影も。

内側に4pxの影をつける

.box{
  box-shadow:inset 4px 4px 4px #aaa;
}

“inset”を指定すれば内側にも影を落とせます。

box-shadowの問題点

下記をご覧ください。

複雑な形のオブジェクトやpng画像に影をつけようとすると、
このように周りに四角い影がかかってしまいます。

2つの解決方法

画像自体に影をつける

画像作成時に影をつけておくというのも一つの方法です。
ただ、影の色を変更したい、影の長さを変えたいといった修正が大変です。
画像を再作成してアップするという手間が発生してしまいます。

CSSのfilter: drop-shadow()を使う

filter: drop-shadow(4px 4px 4px #aaa);

こちらのCSSを使うとpng画像に沿って影をつけることができます。
png画像やSVG画像にも対応しています。
対応しているブラウザはCan I useで調べることができます。
Can I useによればInternet Explorer以外の最新ブラウザには全て対応しているようです。

filter:dorop-shadow()を使う際の注意点

inset（内側）への影をつけることができません。
また、上記でも書いたようにInternet Explorer（IE）では効きません。
IEのシェアがまだ23.7%もあるので、切り捨てるかどうかの判断が必要です。
※2017年12月 StatCounter参照（日本国内）

まとめ

調整もしやすいCSSで影をつける方法がおすすめです。
ただIEでは使用できないので、そこを切り捨てるかの判断が必要です。
Webデザイナー、エンジニア泣かせのIE（泣
まあ、Edgeでは対応しているので、今後時間が経てば全てのブラウザで問題なく表示できることでしょう。

では、また。