【CSS】影を付けるのに何でもbox-shadowを使っていないか!?

1 min読了の目安(約1200字TECH技術記事

はじめに

CSSで影を付ける際、まずbox-shadowが思いつくかと思います
自分も特に考えずbox-shadowを使っていたのですが,
便利なCSS関数filter: drop-shadow()について整理したいと思います

box-shadowとdrop-shadowの描画の違い

まずそれぞれの描画の違いがこちらになります

box-shadow

  • svg画像のボックス要素全体に長方形の影を付ける
  • 疑似要素に影が付かない

drop-shadow

  • svg画像そのものの形に合った影を付ける
  • 疑似要素にも影が付く

サンプルコード

http://runstant.com/cigar/projects/css-tips-drop-shadow

drop-shadowの使い方

filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.5));

引数

filter: drop-shadow( 水平位置, 垂直位置, ぼかし具合, 色 )

水平位置(必須)

x軸の位置です. 指定した数値分右に移動します
マイナス値で左にも移動できます

垂直位置(必須)

y軸の位置です. 指定した数値分下に移動します
マイナス値で上にも移動できます

ぼかし具合(任意)

blur値です. 値が大きくなるほど, 影は広く薄くなります
指定しない場合は規定値の0となり、ぼやけずくっきりとした影になります
マイナス指は指定できません

色(任意)

影の色です. 透明度も指定できます
指定されない場合の既定値は、ブラウザーによります

drop-shadowの弱点

勉強していて, もうbox-shadow要らないじゃん! と思ったのですが,
drop-shadowbox-shadowでは指定できる
影の広がり距離とinset(内側の影)は指定できません

おわりに

上記で見たようなsvg画像の描画に合わせた影や,
疑似要素がある要素の影にはdrop-shadowが便利だと思います

ここまで呼んでいただき、ありがとうございました