CSS ポッドキャスト 017: シャドウ
デザインを依頼されたとします。そのデザインの中に T シャツの写真、 カットアウトとドロップシャドウです デザイナーから、商品画像が動的であると言われました コンテンツ マネジメント システムで更新することも、 ドロップシャドウも動的にする必要がありますT シャツの代わりに、 バイザーやショートパンツなど、さまざまな商品を使用できます。 これを CSS で行うにはどうすればよいでしょうか。
CSS には、
box-shadow
、
text-shadow
個のプロパティ、
画像はテキストではないため、text-shadow
は使用できません。
box-shadow
を使用すると、影を囲むボックスの上に重ねて表示されます。
ではありません。
幸いなことに、
drop-shadow()
フィルタ。
これにより、デザイナーが要求したとおりにそれを実現できます。
CSS には多くのオプションがあり
異なるユースケース向けに設計されています
ボックス シャドウ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
box-shadow
プロパティは、HTML 要素のボックスにシャドウを追加するためのものです。
ブロック要素とインライン要素で機能します。
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
box-shadow
の値の順序は次のとおりです。
- 水平オフセット: 正の数値は左から押し出し、負の数値は右から押し出します。
- 垂直オフセット: 正の数値は上から下に向かって 負の数値は下から押し上げられます
- ぼかし半径: 数値が大きいほど影がぼやけます 数値が小さいと影が鮮明になります。
- 拡散半径(省略可): 数値が大きいほどシャドウのサイズが大きくなり、値が小さいほど小さくなります。 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;
}
テキストの影
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
1 つの要素に一度に設定できるボックス シャドウは 13 個までです。