影

CSS ポッドキャスト - 017: Shadows

作るデザインが送信されたとしましょう。そのデザインに、ドロップ シャドウ付きの切り取られた T シャツの画像があるとします。デザイナーによると、商品画像は動的で、コンテンツ管理システムで更新できるため、ドロップ シャドウも動的にする必要があります。T シャツの代わりに、バイザーやショートパンツなどのアイテムの画像を使用します。これを CSS で行うにはどうすればよいでしょうか。

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

幸いなことに、drop-shadow() フィルタという別のオプションがあります。これにより、デザイナーが求めていたものを正確に実行できます。CSS にはシャドウのオプションが多数用意されており、それぞれが異なるユースケースに合わせて設計されています。

ボックス シャドウ

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

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

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

1. 水平方向のオフセット: 正の数を指定すると左から外側に押し出され、負の値を指定すると右側から押し出されます。
2. 垂直オフセット: 正の数を指定すると上から下から押し下げられ、負の数値は下から上から押し上げられます。
3. Blur radius: 値を大きくするとぼかしが強くなり、数値が小さくなるとシャドウが鮮明になります。
4. Spread radius（省略可）: 数値が大きいほどシャドウのサイズが大きくなり、数値が小さいほど小さくなります。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;
}

ボックス シャドウに影響するプロパティ

ボックスに 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;
}

テキストの影

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 値の複数のインスタンスを追加すると、任意の数のシャドウを追加できます。各シャドウは、最後のシャドウを位置決めの基準点として使用します。

理解度チェック

シャドウに関する知識をテストする