こんにちは！ライターのナナミです。
WEBサイトを作っていて、画像に影をつける場面がちょくちょくありますよね。
そんな時、下記のように画像の形に合わせた影…
こんな感じのにしたい…
と思ったことはありませんか？
実はこれもCSSで実装できちゃいます！
ということで、今回は画像の形に合わせた影をつけられる、drop-shadowを紹介します。
この記事では
・drop-shadowとは何か
・drop-shadowの指定方法
・drop-shadowの実装例
・実装時の注意点
について、ズバッと解説していきます。
CSSで画像に影をつけられると、またデザインの幅が広がりますね。
…ただし、この記事内では、大変残念なお知らせをしなければいけません。
その覚悟を持って、さあ、どうぞ！
drop-shadowとは？
drop-shadowは、filterというプロパティの値の一つです。
filterは画像に何らかのフィルタ（加工）をするプロパティで、drop-shadowはその中の影をつける値となっています。
filterのリファレンスはこちら
http://www.htmq.com/style/filter.shtml
では、細かい特徴などを見ていきましょう！
画像に合わせた影をつけられる
drop-shadow最大の特徴は、画像の輪郭に合わせた影をつけられることです。
例えばこんなロゴがあったとします。
これにdrop-shadowを指定すると…
アイコンの輪郭に合わせた影が表示されましたね。
こんな感じで、画像自体の縦や横のサイズに関わらず、書かれている絵柄の輪郭で影をつけてくれます。
画像は透過PNGかSVGで
drop-shadowでポイントとなるのは、画像の種類です。
画像の種類って、PNGとかJPGとか色々ありますよね。
drop-shadowが効く画像は透過PNGかSVGです。
上記の図を見ると、透過PNGとSVGは画像の周りが白くなっていませんね。
これは透過PNGとSVGが、画像の透過の情報も保持しているデータだからです。
つまり、背景が透明になっている画像であれば、drop-shadowを使えるということです。
両方ともPhotoshopやIllustratorから書き出せるので、書き出し形式をよく見ておきましょう。
SVGについての詳細はこちらの記事が詳しく説明してくれています。
https://ferret-plus.com/8445
box-shadowとの違い
画像に影をつける方法はもう一つあります。
それがbox-shadowというプロパティです。
box-shadowは、要素の輪郭に合わせて影をつけるプロパティです。
drop-shadowは絵柄の輪郭に合わせるので、ちょっと見栄えが違います。
下の画像は、先ほどと同じ画像にbox-shadowを指定したものです。
四角く影がついていますね。
画像データは透過PNGだろうがSVGだろうが、必ず四角いデータとして保存されています。
box-shadowは、この四角い部分に影をつけるプロパティなのです。
box-shadowのリファレンスはこちら
http://www.htmq.com/css3/box-shadow.shtml
対応ブラウザ
さて、なかなか便利なdrop-shadowなのですが、とんでもない弱点を持っています。
そう、ここで大変残念なお知らせです。
drop-shadow、IE11以前は対応していないのです。
drop-shadowがというより、そもそもfilterが使えないという…
IE11のシェアはまだまだ高いので、使うときには注意が必要ですね。
https://webrage.jp/techblog/pc_browser_share/
drop-shadowの使い方
気を取り直して、今度は使い方を見ていきましょう！
指定方法は下記のような感じです。
CSS
セレクタ{
filter: drop-shadow(左右の位置px 上下の位置px ぼかし具合px 色);
}
左右の位置と上下の位置は、元の画像から影がどの位置にあるのかを指定する数値です。
単位はpxで、プラスの値で右と下、マイナスの値で左と上にずれた位置に影が表示されます。
ぼかし具合は、影の輪郭がどのくらいぼやけているかを指定します。
こちらも単位はpx、マイナスの値は指定できません。
最後に影の色を指定します。
カラーコードでもRGBでも、WEBで使えるものならば何でもOKです。
実装してみると…
HTML
<img class="shadow_test" src="test-img.png" alt="">
CSS
.shadow_test {
filter: drop-shadow(5px 5px 5px #aaa);
}
こんな感じになります。
drop-shadowの実装例
では、drop-shadowの具体的な実装案をご紹介します。
ぜひ参考にしてみてください。
ロゴに影をつけよう
HTML
<div class="main_visual">
<img class="shadow_test" src="test-img.png" alt="">
</div>
CSS
.main_visual {
text-align: center; /* 画像を中央寄せ */
background-color: #aaf5ff; /* 背景色 */
}
.shadow_test {
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.7));
}
メインビジュアルのロゴ画像に影をつけてみました。
ちょっと雰囲気がでますね。
ちょっと浮いて見えるアイコン
HTML
<img class="shadow_test" src="test-icon.png" alt="">
CSS
.shadow_test {
filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}
アイコンだけだとただの飾りっぽくなりますが、こうやって浮いてるとボタンっぽくなりますね。
実装時の注意点
使えると絶対便利なdrop-shadow。
繰り返しになりますが、最後にもう一度だけ注意点をおさらいしておきます。
画像の種類に気をつけよう
実装する際、画像が透過PNGまたはSVGになっているか、しっかり確認するようにしましょう。
対応ブラウザに要注意
IE11以前はdrop-shadowが使えません。
というか、filterが使えません。
IE11にも対応した状態にしたい場合は、画像を作る際に影をつけてから切り出すようにしましょう。
本当に残念…
まとめ
いかがでしたか？
IE11の問題さえなければ…とちょっと悔しくなりますね。
しかしIE11のサポートが終わり、シェアも下がってきたら出番も増えてくると期待しています。
drop-shadowの今後の活躍にご期待ください！
