CSSで画像などに影をつけたいときは、「box-shadow」
テキストに影をつけたいときは「text-shadow」を使用しますよね。
たとえばSVGのアイコンなどに影を付けたい場合
上記2種類のどちらを使用するかと問われるとbox-shadowだと思うのですが
box-shadowはSVGの輪郭にそって影をつけるのではなく、SVGの枠に影をつけてしまいます。
それを回避するために
「drop-shadow」があります。
書き方は簡単！
svg {
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
}
box-shadowと同じように色やXY軸を指定すればあっという間に下記のような影を作ってくれます。
See the Pen filter: drop-shadow() by sayuri (@giraffeweb) on CodePen.light
「box-shadow」とは書き方が違うので注意してくださいね。
svg {
box-shadow: 0px 3px 10px rgba(0,0,0,.8);
}
svg {
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
}
比較してみるとこんな感じです。
See the Pen filter: drop-shadow()比較 by sayuri (@giraffeweb) on CodePen.light
みなさんもぜひ使用してみてくださいね！