先日、text-shadowという文章に影をつけるCSSプロパティをご紹介しました。
今回は画像やオブジェクトなどに影をつける「box-shadow」と「filter:drop-shadow」についてまとめたいと思います！
box-shadow（ボックスシャドウ）の使い方
使い方は［水平方向の距離］、［垂直方向の距離］を指定するだけ！
（厳密には水平方向の距離、垂直方向の距離、ぼかし、広がり、影の色、内側といった細かい指定をすることが可能です）
記述例：text-shadow : 2px 2px 5px rgba(0,0,0,0.5);
このように、box-shadowは四角形にのみ対応しています。
filter: drop-shadow（ドロップシャドウ）の使い方
使い方はbox-shadowと同じく［水平方向の距離］と［垂直方向の距離］さえ記述していれば実装することができます。
box-shadowとの決定的な違いは、広がりの大きさと内側の指定ができないこと！
水平方向、垂直方向、ぼかし、色の指定をした例がこちら↓
記述例：filter: drop-shadow (2px 2px 2px rgba(0,0,0,0.5));
このようにPNGやSVG形式の透過したイラストなど、四角形以外のものにも対応しています。
まとめ
box-shadow（ボックスシャドウ）は四角形にしか影をつけることができないが、水平方向の距離、垂直方向の距離、ぼかし、広がり、影の色、内側を指定することができる。
drop-shadow（ドロップシャドウ）は様々な形に対応し、透過したデータにも影をつけることができるが、指定できるのは水平方向の距離、垂直方向の距離、ぼかし、影の色のみ。
両者とも一長一短ありますが、とても便利なプロパティです。上手く使い分けていきたいですね。
コメント