画像に影をつけたいときに使うプロパティ、box-shadow と filter: drop-shadow
よく使うけど性質が違うふたつに絞って紹介していきます
要素自体に影をつける・box-shadow
影を表現するのに最もよく使うのが box-shadow です
指定方法
下記のパラメータを指定します
box-shadow: 水平方向の距離 垂直方向の距離 ぼかし 広がり 色指定;
水平方向：指定なし(０)、垂直方向：4px、ぼかし：10px、広がり：省略、色指定：#000
と指定すると、このようになります
box-shadow: 0 4px 10px #000;
また、パラメータに inset を入れると、内側の影に変更されます（外側の影のときは省略します）
box-shadow: 0 0 10px #000 inset;
ぼかしを0(ゼロ)にすると、くっきりした重なったような影になります
※わかりやすいように背景色をつけています
box-shadow: 8px 8px 0 #000;
コードペンでパラメータの数値を変えたりして試してみてください
↓↓右側の『EDIT ON CODEPEN』を押すとコードペンを開けます
See the Pen box-shadow by puchi-code (@puchi-code) on CodePen.
透明度や形状に影をつける・filter: drop-shadow
次に、filterプロパティに drop-shadow の値を指定することで影をつける方法です
こちらは透過したpng画像、SVG、clip-pathなどの形状に影をつけたいときに使えます
指定方法
下記のパラメータを指定します
filter: drop-shadow( 水平方向の距離 垂直方向の距離 ぼかし 色指定 );
今回は png画像に対して 水平方向：0、垂直方向：4px、ぼかし：4px、色指定：オレンジ
を指定します
filter: drop-shadow(0 4px 4px orange);
絵柄がついたサイトのロゴなどに使ってもオシャレになりますね
drop-shadow にはこのような特徴があります
- 疑似要素にも使える
- 影の広がりの指定はできない
- 内側につけるinsetなどの指定はできない
用途に応じて box-shadowと使いわけていきましょう
↓↓右側の『EDIT ON CODEPEN』を押すとコードペンを開けます
See the Pen drop-shadow by puchi-code (@puchi-code) on CodePen.
要素に影をつける方法・box-shadowとfilter: drop-shadow・まとめ
今回は、box-shadow と filter: drop-shadow をご紹介しました
デザインカンプでコーディングする際、本当によくよく見ないとわからないくらいの微妙な影のあしらいがついていることがあります
（気づかずに提出後指摘されてしまうことも…）
そういったものも見逃さないで、デザインに忠実にコーディングするようにしたいものです
ではまた！