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
の値の順序は次のとおりです。
- 水平方向のオフセット: 正の数を指定すると左から外側に押し出され、負の値を指定すると右側から押し出されます。
- 垂直オフセット: 正の数を指定すると上から下から押し下げられ、負の数値は下から上から押し上げられます。
- Blur radius: 値を大きくするとぼかしが強くなり、数値が小さくなるとシャドウが鮮明になります。
- Spread radius(省略可): 数値が大きいほどシャドウのサイズが大きくなり、数値が小さいほど小さくなります。0 に設定されている場合は、ぼかしの半径と同じサイズになります。
- 色: 任意の有効な色値。このフィールドが定義されていない場合は、計算されたテキストの色が使用されます。
ボックスをデフォルトの外側のシャドウではなく、内側のシャドウにするには、他のプロパティの前に 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
値の複数のインスタンスを追加すると、任意の数のシャドウを追加できます。各シャドウは、最後のシャドウを位置決めの基準点として使用します。
理解度チェック
シャドウに関する知識をテストする
box-shadow
に固有のシャドウの値は次のうちどれですか。
inset
inset
は、box-shadow
に固有のキーワードです。1 つの要素に設定できるボックス シャドウは一度に 13 個までです。