レンちゃんとペンタ

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

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

以下は、いずれも要素に影をつけるためのプロパティです。
・box-shadow
・filter: drop-shadow()
・text-shadow

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);
}
    box-shadowでシャドウをつけたペンタ
    box-shadowのペンタ

    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;
}
    ペンタ

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

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

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

    text-shadowを使った場合

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

    まとめ

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

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

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

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

    Related Posts