cssのdrop-shadowで透過画像に合わせた影をつける方法（IE未対応）

MARKLEAPS

2021.09.14

透過画像に沿った影を付ける方法をご紹介します。

box-shadowだと画像の枠に沿った四角形の影が出来てしまう

・html

<img class="box_shadow01" src="css-drop-shadow02.png" />

1	<img class="box_shadow01" src="css-drop-shadow02.png" />

・css

.box_shadow01 {
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.box_shadow01 {

box-shadow: 10px 10px 10px rgba(0,0,0,0.4);

}

drop-shadowなら画像の輪郭に沿った影が付けられる！

・html

<img class="drop_shadow01" src="css-drop-shadow02.png" />

1	<img class="drop_shadow01" src="css-drop-shadow02.png" />

・css

.drop_shadow01 {
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
}

.drop_shadow01 {

filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));

}

drop-shadowの指定方法

drop-shadow(水平方向の距離垂直方向の距離ぼかしの距離色)
で指定します。
色はカラーコード、RGBで指定できます。
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
filter: drop-shadow(10px 10px 10px #666666);