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

WEBデザイン

先日、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(ドロップシャドウ)は様々な形に対応し、透過したデータにも影をつけることができるが、指定できるのは水平方向の距離垂直方向の距離ぼかし影の色のみ。

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

コメント

タイトルとURLをコピーしました