MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

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

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

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

・html

 
・css

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


・html

 
・css

drop-shadowの指定方法

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

IEには対応していないので注意

IEでも透過画像に影を付けたい、という場合は、
画像を作る際に影をつけてから保存するようにしないといけません。

よく読まれている関連記事

関連最新記事