CSSのdrop-shadowで画像に合わせた影をつける方法

こんにちは!ライターのナナミです。

WEBサイトを作っていて、画像に影をつける場面がちょくちょくありますよね。
そんな時、下記のように画像の形に合わせた影…

drop_ shadow1

こんな感じのにしたい…
と思ったことはありませんか?

実はこれも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_ shadow2

これにdrop-shadowを指定すると…

drop_ shadow1

アイコンの輪郭に合わせた影が表示されましたね。

こんな感じで、画像自体の縦や横のサイズに関わらず、書かれている絵柄の輪郭で影をつけてくれます

画像は透過PNGかSVGで

drop-shadowでポイントとなるのは、画像の種類です。

画像の種類って、PNGとかJPGとか色々ありますよね。
drop-shadowが効く画像は透過PNGかSVGです。

drop_ shadow3

上記の図を見ると、透過PNGとSVGは画像の周りが白くなっていませんね。
これは透過PNGとSVGが、画像の透過の情報も保持しているデータだからです。

つまり、背景が透明になっている画像であれば、drop-shadowを使えるということです。

両方ともPhotoshopやIllustratorから書き出せるので、書き出し形式をよく見ておきましょう。

SVGについての詳細はこちらの記事が詳しく説明してくれています。
https://ferret-plus.com/8445

box-shadowとの違い

画像に影をつける方法はもう一つあります。
それがbox-shadowというプロパティです。

box-shadowは、要素の輪郭に合わせて影をつけるプロパティです。
drop-shadowは絵柄の輪郭に合わせるので、ちょっと見栄えが違います。

下の画像は、先ほどと同じ画像にbox-shadowを指定したものです。

drop_ shadow4

四角く影がついていますね。

画像データは透過PNGだろうがSVGだろうが、必ず四角いデータとして保存されています
box-shadowは、この四角い部分に影をつけるプロパティなのです。

box-shadowのリファレンスはこちら
http://www.htmq.com/css3/box-shadow.shtml

対応ブラウザ

さて、なかなか便利なdrop-shadowなのですが、とんでもない弱点を持っています。

そう、ここで大変残念なお知らせです。

drop-shadow、IE11以前は対応していないのです。

drop-shadowがというより、そもそもfilterが使えないという…

IE11のシェアはまだまだ高いので、使うときには注意が必要ですね。

drop_ shadow-ie2
https://webrage.jp/techblog/pc_browser_share/

drop-shadowの使い方

気を取り直して、今度は使い方を見ていきましょう!

指定方法は下記のような感じです。

CSS

セレクタ{
filter: drop-shadow(左右の位置px 上下の位置px ぼかし具合px 色);
}

左右の位置と上下の位置は、元の画像から影がどの位置にあるのかを指定する数値です。
単位はpxで、プラスの値で右と下、マイナスの値で左と上にずれた位置に影が表示されます。

ぼかし具合は、影の輪郭がどのくらいぼやけているかを指定します。
こちらも単位はpx、マイナスの値は指定できません。

最後に影の色を指定します。
カラーコードでもRGBでも、WEBで使えるものならば何でもOKです。

実装してみると…

drop_ shadow1
HTML

<img class="shadow_test" src="test-img.png" alt="">

CSS

.shadow_test {
        filter: drop-shadow(5px 5px 5px #aaa);
}

こんな感じになります。

drop-shadowの実装例

では、drop-shadowの具体的な実装案をご紹介します。
ぜひ参考にしてみてください。

ロゴに影をつけよう

drop_ shadow-ex1
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));
}

メインビジュアルのロゴ画像に影をつけてみました。
ちょっと雰囲気がでますね。

ちょっと浮いて見えるアイコン

drop_ shadow-ex2

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の今後の活躍にご期待ください!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー