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

isaos blog【CSS】box-shadowは古い?drop-shadowだと!?drop-shadowなら疑似要素にもSVG画像にも影がつく! | isaos blog
2021 May 25th
box-shadowは古い?drop-shadowだと!?drop-shadowなら疑似要素にもSVG画像にも影がつく!                

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

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

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

「X軸」「Y軸」= 数値で右へ下へとずれます。
マイナスにする事で左や上にずらす事ができます。
「ブラー半径」= ぼかしの量の事です。
「スレッド半径」= 影のボックス自体の拡大縮小。

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

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

css
 
.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
drop-shadow
box-shadow と大きな違いはないです。
記述方法は少し違いますが…
むしろ、影をつけるだけなら box-shadow で十分。
じゃ、いらねーじゃん?

ところが、擬似要素を使うと、親要素と擬似要素とそれぞれに影を付ける必要がありますが、
drop-shadow だと一発!
擬似要素ってのは ::before ::after とかのやつですね。
四角に三角を付けて吹き出しにしたり、自動で『』がつくようにしたりするやつです。

最近だとSVG画像を使った場合です。
SVG画像に box-shadow の場合、周りに四角い影が付きますが、
drop-shadow だとちゃんとSVG画像に合わせた影が付くのです。

さっそく見てみましょう!

まずは疑似要素(吹き出しバージョン)

css
 
.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

疑似要素で後付した三角の部分にも影が付いてますね!

次はSVG画像です。
CSSで img に付けてください。

css
 
.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));
}

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

               
  • ビットコインが勝手に貯まる!やって損なし!【CryptoTab】
  • 国内最速!初期費用無料の高性能レンタルサーバー【ConoHa WING】
  • 国内最速!初期費用無料の高性能レンタルサーバー【ConoHa WING】
ISAOS
isaos design ホームページ制作を主として各種印刷物やイラストの作成を行っております。 気になる事とか質問・疑問などあればお気軽にお問い合わせください。
COMMENTS
Leave Your Message


上の計算式の答えを入力してください

Recent Posts
写真に興味があるなら早く使ったほうがいい!PHOTOSHOP & LIGHTROOM
技術進化の対応に追いつく為にも早い内に契約した方がいい!ADOBE CREATIVE CLOUD
Categories
国内最安値に挑戦!格安ドメイン名取得サービス「エックスドメイン」
急げ、ドメインは早い者勝ち!「お名前.com」
box-shadowは古い?drop-shadowだと!?drop-shadowなら疑似要素にもSVG画像にも影がつく!