0%

Programmingプログラミングナレッジ

Posted:2019.09.27

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

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で対応することで、より柔軟な表現ができデザインの幅も広がりそうですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】