【コーディング初心者向け講座】影をつけるCSSプロパティ「box-shadow」と「 drop-shadow」について学ぶ！〜CSS〜

先日、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形式の透過したイラストなど、四角形以外のものにも対応しています。

まとめ

両者とも一長一短ありますが、とても便利なプロパティです。上手く使い分けていきたいですね。