#HTML・CSS・JavaScript

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

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

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

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

この記事で分かること

CSSでドロップシャドウをつける方法3つの使い分け

Webデザインとブログで豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

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);
}

box-shadowを使ったdiv要素

filter:drop-shadow()

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

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

filter:drop-shadow()を使ったdiv要素

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

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

filter:drop-shadow()を使ったdiv要素（背景色つき）

画像で比較

今度は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));
}

filter:drop-shadow()でシャドウをつけた画像 — filter:drop-shadow()の画像

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

続いては、擬似要素に関して実験してみます。
おなじみの(?)::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{
  /* 省略 */
}

box-shadowの吹き出し

filter:drop-shadow()

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

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

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

filter:drop-shadow()の吹き出し

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

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);
}

text-shadowのサンプル

一見、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;
}

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

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

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

まとめ

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

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

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

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

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

box-shadowとfilter:drop-shadow()

div要素で比較

box-shadow

filter:drop-shadow()

画像で比較

box-shadow

filter:drop-shadow()

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

box-shadow

filter:drop-shadow()

text-shadow

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

まとめ

Related Posts