box-shadowはもう古い?drop-shadowなら疑似要素にもSVG画像にも影がつく! box-shadowはもう古い?drop-shadowなら疑似要素にもSVG画像にも影がつく!
   
   
CONTENTS

box-shadowはもう古い?drop-shadowなら疑似要素にもSVG画像にも影がつく!

CSSで影をつける時、box-shadowを使うと思いますが、drop-shadowがおすすめです。
drop-shadowなら、疑似要素やSVG画像にも影がつけれちゃうんです!
CONTENTS

box-shadowについて

CSSでボックスに影を付けると言えば?
box-shadow です。

box-shadowはよく使っていると思いますのでさらっとおさらい。

box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5) って感じで書きます。
左から順に  X軸 Y軸 ブラー半径 スレッド半径 影の色 となります。

「影の色」は #000でも良いですが、rgba(0, 0, 0, 0.5)とする事でalpha値を使えるので透明度が調整できます。

内側に影を付けたい時は最後に inset と付け足してください。

.basic1 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
}
.basic2 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5) inset;
}
basic1
basic2

basic1:普通に影をつけたもの
basic2:insetで内側に影をつけたもの

drop-shadowで疑似要素に影をつける

box-shadow と大きな違いはないです。
記述方法は少し違いますが…

むしろ、影をつけるだけなら box-shadow で十分です。
じゃ、いらねーじゃん?

ところが、擬似要素の場合、うまく影がつかないんです。
(擬似要素ってのは ::before ::after とかのやつね)

.basic3 {
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic4 {
  filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
basic3
basic4

疑似要素で三角形を作って吹き出しにしたものです。

basic3:疑似要素部分の三角形に影がつきません。
basic4:drop-shadowなら、疑似要素にもちゃんと影がつきます。

drop-shadowでSVG画像に影をつける

そして、SVG画像!
SVG画像に box-shadow の場合、SVG画像の周りに四角い影が付いてしまいます。
drop-shadow 場合、SVG画像に合わせた影が付くのです!
これすごくない?

.basic5 img {
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic6 img {
  filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

basic5:SVGの中身ではなく周りに影がついてしまう。
basic6:SVGのパスに沿って影をつけてくれる。

ね?
SVG画像にも綺麗に影がついたでしょ?

作者
Written By isao
三重県四日市市でホームページを制作しております。 DIY、塊根植物、ガジェット大好きなのでブログ書いてます。 気になる事・質問などあればお気軽にコメントお問い合わせください。
三重県四日市市でホームページを制作しております。 DIY、塊根植物、ガジェット大好きなのでブログ書いてます。 気になる事・質問などあればお気軽にコメントお問い合わせください。
COMMENT

Leave Your Message

RELATED
WEB
Oct 1, 2023
READ MORE
WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます!

WordPressの404エラーページを作成!ブラウン管のモニター風にカスタマイズする方法|実際に使ってます!

WEB
Oct 21, 2023
READ MORE
WEBデザイン事務所がぶっちゃける!ホームページって何にお金がかかってる?安く作る方法とは?

WEBデザイン事務所がぶっちゃける!ホームページって何にお金がかかってる?安く作る方法とは?

WEB
Jul 20, 2024
READ MORE
絶対入れるべきChromeの拡張機能!おすすめ10選!WEBデザイナー向け

絶対入れるべきChromeの拡張機能!おすすめ10選!WEBデザイナー向け

WEB
May 11, 2023
READ MORE
WPの階層を変更!URLの「wp」を取ってドメイン直下にする方法

WPの階層を変更!URLの「wp」を取ってドメイン直下にする方法

WEB
Aug 18, 2024
READ MORE
Macのショートカット記号

Macのショートカット記号

READ MORE
POPULAR
May 27, 2023
READ MORE
伝説の左手装備?「TourBox」の使い方と設定!EliteとNEOの違いも解説
GADGET No.3

伝説の左手装備?「TourBox」の使い方と設定!EliteとNEOの違いも解説

Jan 7, 2024
READ MORE
iPhoneユーザー必見!Apple「ホーム」アプリをオススメする理由!Homekit対応にする方法
GADGET No.14

iPhoneユーザー必見!Apple「ホーム」アプリをオススメする理由!Homekit対応にする方法

DIY
Apr 20, 2023
READ MORE
温湿度篇 温度と湿度を徹底管理する!|IKEAファブリコールを全自動温室にDIY
FABRIKOR Vol.5

温湿度篇 温度と湿度を徹底管理する!|IKEAファブリコールを全自動温室にDIY

Jun 2, 2023
READ MORE
最も簡単な連携方法で家電を操作する方法!Stream DeckとSwitchBotの連携でスマートライフを実現
GADGET No.5

最も簡単な連携方法で家電を操作する方法!Stream DeckとSwitchBotの連携でスマートライフを実現

DIY
Apr 9, 2023
READ MORE
はじまり篇 温室を作る事になった理由とは?|IKEAファブリコールを全自動温室にDIY
FABRIKOR Vol.1

はじまり篇 温室を作る事になった理由とは?|IKEAファブリコールを全自動温室にDIY

READ MORE