影

The CSS Podcast - 017: Shadows

作成するデザインが送られてきて、そのデザインにカットアウトされた T シャツの画像とドロップシャドウが含まれているとします。デザイナーから、商品画像は動的で、コンテンツ マネジメント システムで更新できるため、ドロップシャドウも動的にする必要があると聞きました。画像は、T シャツではなく、バイザーやショートパンツなど、他のアイテムでも構いません。CSS でこれを実現するにはどうすればよいですか？

CSS には box-shadow プロパティと text-shadow プロパティがありますが、画像はテキストではないため、text-shadow は使用できません。box-shadow を使用すると、シャドウは T シャツの周囲ではなく、周囲のボックスに適用されます。

幸い、drop-shadow() フィルタという別の方法があります。これにより、デザイナーの要望に正確に対応できます。CSS のシャドウには、それぞれ異なるユースケースに合わせて設計された多くのオプションがあります。

ボックス シャドウ

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

box-shadow プロパティは、HTML 要素のボックスにシャドウを追加するためのものです。ブロック要素とインライン要素で動作します。

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow の値の順序は次のとおりです。

  1. 水平オフセット: 正の数値を指定すると左に、負の数値を指定すると右に移動します。
  2. 垂直オフセット: 正の数を指定すると上から下に、負の数を指定すると下から上に移動します。
  3. ぼかし半径: 値を大きくすると影のぼかし具合が大きくなり、値を小さくすると影のぼかし具合が小さくなります。
  4. 拡散半径（省略可）: 値が大きいほどシャドウのサイズが大きくなり、値が小さいほどシャドウのサイズが小さくなります。0 に設定されている場合は、ぼかし半径と同じサイズになります。
  5. 色: 有効な色の値。定義されていない場合は、計算されたテキスト色が使用されます。

デフォルトの外側のシャドウではなく、ボックス シャドウを内側のシャドウにするには、他のプロパティの前に inset キーワードを追加します。

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

複数のシャドウ

box-shadow を使用して、必要な数のシャドウを追加できます。これを実現するには、値セットのカンマ区切りのコレクションを追加します。

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

box-shadow に影響するプロパティ

ボックスに border-radius を追加すると、ボックスシャドウの形にも影響します。これは、CSS が光が当たっているかのようにボックスの形状に基づいてシャドウを作成するためです。

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

box-shadow を含むボックスが overflow: hidden を含むコンテナ内にある場合、シャドウもそのオーバーフローを破棄しません。

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

テキストの影

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

text-shadow プロパティは box-shadow プロパティによく似ています。テキストノードでのみ機能します。

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow の値は box-shadow と同じで、順序も同じです。唯一の違いは、text-shadow には spread 値と inset キーワードがないことです。

box-shadow を追加すると、ボックスの形状にクリップされますが、text-shadow にはクリップがありません。つまり、テキストが完全に透明または半透明の場合、影がテキストを通して見えます。

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

複数のシャドウ

box-shadow と同様に、text-shadow を使用してシャドウをいくつでも追加できます。カンマ区切りの値セットのコレクションを追加すると、3D テキストなどのクールなテキスト エフェクトを作成できます。

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

ドロップ シャドウ

画像の曲線に沿ったドロップ シャドウを実現するには、CSS drop-shadow フィルタを使用します。このシャドウはアルファマスクに適用されるため、このモジュールの冒頭の例のように、切り抜き画像にシャドウを追加する場合に非常に便利です。

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow フィルタの値は box-shadow と同じですが、inset キーワードと spread 値は使用できません。filter プロパティに drop-shadow 値の複数のインスタンスの追加により、シャドウをいくつでも追加できます。各シャドウは、最後のシャドウを配置の参照ポイントとして使用します。

理解度を確認する

影に関する知識をテストする

以下のシャドウ値のうち、box-shadow に固有のものはどれですか。

水平方向のオフセット
もう一度考えてみましょう。
垂直オフセット
もう一度考えてみましょう。
ぼかし半径
もう一度考えてみましょう。
拡散半径
🎉
色
もう一度考えてみましょう。
inset
もう一度考えてみましょう。inset は box-shadow に固有のキーワードです。

要素に一度に適用できるボックスシャドウは 13 個までです。

正しい
公式な上限はありません。
False
必要に応じて複数のボックスシャドウを追加します。