影

CSS ポッドキャスト 017: シャドウ

デザインを依頼されたとします。そのデザインの中に T シャツの写真、 カットアウトとドロップシャドウです デザイナーから、商品画像が動的であると言われました コンテンツ マネジメント システムで更新することも、 ドロップシャドウも動的にする必要がありますT シャツの代わりに、 バイザーやショートパンツなど、さまざまな商品を使用できます。 これを CSS で行うにはどうすればよいでしょうか。

CSS には、 box-shadow、 text-shadow 個のプロパティ、 画像はテキストではないため、text-shadow は使用できません。 box-shadow を使用すると、影を囲むボックスの上に重ねて表示されます。 ではありません。

幸いなことに、 drop-shadow() フィルタ。 これにより、デザイナーが要求したとおりにそれを実現できます。 CSS には多くのオプションがあり 異なるユースケース向けに設計されています

ボックス シャドウ

対応ブラウザ

  • Chrome: 10. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5.1. <ph type="x-smartling-placeholder">

ソース

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

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

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

テキストの影

対応ブラウザ

  • Chrome: 2. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 1.1。 <ph type="x-smartling-placeholder">

ソース

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

複数のシャドウ

text-shadow を使用すると、いくつでもシャドウを追加できます。 box-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 に固有のキーワードです。

1 つの要素に一度に設定できるボックス シャドウは 13 個までです。

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