👤
【CSS】影を付けるのに何でもbox-shadowを使っていないか!?
はじめに
CSSで影を付ける際、まずbox-shadowが思いつくかと思います
自分も特に考えずbox-shadowを使っていたのですが,
便利なCSS関数filter: drop-shadow()について整理したいと思います
box-shadowとdrop-shadowの描画の違い
まずそれぞれの描画の違いがこちらになります
box-shadow
- svg画像のボックス要素全体に長方形の影を付ける
- 疑似要素に影が付かない
drop-shadow
- svg画像そのものの形に合った影を付ける
- 疑似要素にも影が付く
サンプルコード
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-shadowはbox-shadowでは指定できる
影の広がり距離とinset(内側の影)は指定できません
付けたいshadowによって使い分けしたほうがよいですね
おわりに
上記で見たようなsvg画像の描画に合わせた影や,
疑似要素がある要素の影にはdrop-shadowが便利だと思います
ご覧いただき、ありがとうございました
Discussion