Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2019.09.27

CSSのfilterプロパティにあるdrop-shadow()で画像や要素にドロップシャドウ効果をつける

Tags: ,
最終更新日:Update

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要素
JPG画像
PNG画像
SVG画像

 

そこで、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要素
JPG画像
PNG画像
SVG画像

 

filterプロパティのdrop-shadowを使った場合、IE11などのレガシーブラウザには対応していないので注意が必要です。IE11を対象外にするのであれば、box-shadowの代わりにfilterプロパティのdrop-shadowを使っても問題なさそうですね。

 


 

box-shadowはその名の通り、ボックス状でしかドロップシャドウ効果をつけることができませんでしたが、filterプロパティのdrop-shadowで対応することで、より柔軟な表現ができデザインの幅も広がりそうですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?