• #HTML・CSS・JavaScript

【サンプルで比較】CSSでドロップシャドウをつける3つの方法

以下は、いずれも要素に影をつけるためのプロパティです。

・box-shadow
・filter: drop-shadow()
・text-shadow

3つもあるの？何が違うの？サンプルを使って整理していきます。

box-shadowとfilter:drop-shadow()

まずはbox-shadowとfilter:drop-shadow()、2つを比較しながら紹介します。
それぞれこのような表記で使います。

/* box-shadowプロパティの設定方法 */
div{
  box-shadow: 値1 値2 値3 値4;
}

/* filterプロパティの設定方法 */
div{
  filter: drop-shadow(値1 値2 値3 値4);
}

どちらの方法も、4つの値を使って好みのシャドウにすることができます。
値の表記順や役割は両プロパティとも共通なので、まとめて覚えてしまうと便利です。

・値1：シャドウのX方向位置（横方向にどれくらいシャドウをズラすか）
・値2：シャドウのY方向位置（縦方向にどれくらいシャドウをズラすか）
・値3：シャドウをどのくらいぼかすか
・値4：シャドウの色

続いてサンプルを使って、2つのプロパティの違いを見ていきます。

div要素で比較

まずはdiv要素に適用して比べてみます。

box-shadow

box-shadowでは、div要素の輪郭にシャドウがつきます。

div{
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

filter:drop-shadow()

filter:drop-shadow()では、要素の中身にシャドウがつきます。

div{
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
}

ただし、背景色を指定すると、box-shadowと同じような挙動になります。

div{
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
  background-color: #EEE;
}

画像で比較

今度はimg要素。
透過情報を持ったpng画像で実験してみます。

box-shadow

box-shadowでは、やはり画像の輪郭に対してシャドウがつきます。

img{
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

filter:drop-shadow()

filter:drop-shadow()では、画像の透過部分まで丁寧に追いかけてシャドウをつけてくれます。

img{
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
}

透過情報を持っていない画像に関しては、どちらを利用しても同様の結果になります。

続いては、擬似要素に関して実験してみます。
おなじみの(?)::before、::afterに関してはどうでしょう。

擬似要素（::before、::after）で比較

今度は三角形部分を::beforeで作った吹き出しで実験してみます。

/* 吹き出しの四角部分 */
div{
  position: relative;
  width: 200px;
  background: #AFF1FD;
  margin: 0 auto; 
  text-align: center;
}

/* 吹き出しの三角部分 */
div::before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -26px;
  left: calc(50% - 13px);
  border-top: 26px solid #AFF1FD;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
}

box-shadow

box-shadowでは、期待通りのシャドウがつけられません。

/* 吹き出しの四角部分 */
div{
  /* 省略 */
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

/* 吹き出しの三角部分 */
div::before{
  /* 省略 */
}

filter:drop-shadow()

filter:drop-shadow()では、バッチリつけられます。

/* 吹き出しの四角部分 */
div{
  /* 省略 */
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
}

/* 吹き出しの三角部分 */
div::before{
  /* 省略 */
}

擬似要素は様々な目的で利用され、その表現手法もたくさん存在します。
要素とプロパティ、いろいろな組み合わせを試して実装方法を探っていくと面白そうです。

text-shadow

ご紹介が遅くなりましたが、シャドウ系ではもう一つ、text-shadowプロパティというのがあります。

/* text-shadowプロパティ */
div{
  text-shadow: 値1 値2 値3 値4;
}

値1〜値4の用法は、box-shadowなどと同じです。
名前の通り、テキストにのみシャドウをつけることができます。

div{
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

一見、drop-shadowの方が有能そうですが、逆の発想で「テキスト以外にシャドウをつけたくない」時はこちらの方が便利です。

text-shadowとdrop-shadowの使い分け

テキストと画像を内包したdiv要素を作ってそれぞれのプロパティを使用してみます。

<div>
  <img src="画像" />
  <p>テキスト</p>
</div>

div要素にボーダーをつけた上で、filter:drop-shadow()を使ってみます。
テキストや画像はもちろん、ボーダーにもシャドウがつきます。

div{
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
  border: 6px solid #4978C9;
}

filter:drop-shadow()を使った場合

text-shadowを使った場合は、テキスト以外にシャドウがつくのを回避することができます。

div{
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
  border: 6px solid #4978C9;
}

text-shadowを使った場合

どこまでをシャドウの対象にしたいのか次第で、適切なプロパティを選んでいけばいいですね。

まとめ

シャドウをつけるためのプロパティ3つをご紹介しました。

CSSでシャドウをつける方法まとめ

• box-shadow：要素の輪郭にシャドウをつけたい時に
• filter:drop-shadow()：要素の内容にシャドウをつけたい時に
• text-shadow：テキスト以外にはシャドウをつけたくない時に

たくさんあって混乱しますが、CSSの表現が豊かになるに従い、少しずつプロパティも増えていったのではないかな、と推測します。
楽しみながら使い分けていきましょう。

1. Home
2. 【サンプルで比較】CSSでドロップシャドウをつける3つの方法