【CSS】要素に影をつける方法・box-shadowとfilter: drop-shadow

画像に影をつけたいときに使うプロパティ、box-shadowfilter: drop-shadow

よく使うけど性質が違うふたつに絞って紹介していきます

スポンサーリンク
目次

要素自体に影をつける・box-shadow

影を表現するのに最もよく使うのが box-shadow です

指定方法

下記のパラメータを指定します

box-shadow: 水平方向の距離 垂直方向の距離 ぼかし 広がり 色指定;

 

水平方向:指定なし(0)、垂直方向: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画像SVGclip-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 をご紹介しました

デザインカンプでコーディングする際、本当によくよく見ないとわからないくらいの微妙な影のあしらいがついていることがあります

(気づかずに提出後指摘されてしまうことも…)

そういったものも見逃さないで、デザインに忠実にコーディングするようにしたいものです

ではまた!

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次