CSSで要素に影をつける方法

CSSで要素に影をつける方法を紹介します。要素に立体感を持たせたい場合や境目を強調したい場合などに使用することが多いです。

このテクニックは実際のWeb制作の現場でも割と使う方なので、覚えておいて損はないと思います。

影つきのボックス

div要素に影をつけて立体感のあるボックスを作ります。

HTML

<div class="shadow-box1">shadow-box1</div>
<div class="shadow-box2">shadow-box2</div>

CSS

.shadow-box1 {
  width: 300px;
  height: 300px;
  background: #ec4646;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.5);
}

.shadow-box2 {
  width: 500px;
  height: 100px;
  background: #ec4646;
  box-shadow: 0px 6px 6px -5px rgba(0,0,0,0.8);
}

box-shadowで影の設定を行っています。

数値は左から水平方向の距離・垂直方向の距離・ぼかし距離・広がり距離となっており、最後のrgbaで色の指定をしています。色の指定は16進法でも問題ありませんが、ある程度透過させないと影っぽく見えず見栄えが悪いのでrgbaで指定することが多いです。

サンプル

shadow-box1は要素の右と下に影をつけたオーソドックスなタイプです。
おそらくこれが一番実用的だと思います。

shadow-box2は下側のみに影を表示しています。

CSSで画像に影をつける

この方法を使えば、画像にも簡単に影をつけることが可能です。

HTML

<img src="./images/img.jpg" alt="" class="shadow-img">

CSS

.shadow-img {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

サンプル

画像に影がつきました。
普通に貼り付けるより立体感が出ています。

まとめ

CSSのbox-shadowを使用して、要素に影をつけることにより立体感を表現することができます。
実際のWebサイトでも割と使用することが多く、実用的なテクニックなのでぜひ覚えておきましょう。