トークン
シャドウ
ライトとダークに合わせて調整した、重なりのあるエレベーションシャドウ。
このページの内容
クラス
| クラス | 宣言 |
|---|---|
shadow-<name> | box-shadow: var(--shadow-<name>); |
shadow-<name> は box-shadow の値全体を設定します。2 つのシャドウクラスが互いのリストを追加し合うことはなく、優先される宣言がシャドウ全体を指定します。
値
各トークンは、カンマで区切られたネイティブシャドウのリストを持ちます。値を展開すると各レイヤーを確認できます。ライトとダークではオフセット、ぼかし、広がりの長さは同じで、light-dark() の色だけが異なります。
| クラス | 値 |
|---|---|
shadow-xs |
|
shadow-sm |
|
shadow-md |
|
shadow-lg |
|
shadow-xl |
|
shadow-2xl |
|
shadow-inset |
|
すべてのシャドウの値を比較
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlshadow-2xlshadow-insetシャドウが変えるのは描画でありレイアウトではない
shadow-xs と shadow-xl は、同じボックスの周りに異なる広がりの影を描きます。どちらもシャドウ用の空間は確保しないため、後続要素の位置と間隔は変わりません。
シャドウの描画はレイアウトの空間を確保しない
サーフェスの形状と寸法、次の要素までの 16px の間隔は同じで、シャドウトークンだけが変わります。目盛りが測るのはボックス間の間隔であり、シャドウの見える縁までの距離ではありません。
テキストによる説明
- 両方の列は同じサーフェスと後続要素を含みます。寸法、padding、レイアウト上の 16px の間隔はすべて同じです。
- 左のサーフェスはプリセットの shadow-xs トークンを使います。右は shadow-xl を使い、より広い範囲に、より多くの層を描きます。
- どちらの列でも、次の要素は同じ高さから始まります。ボックスシャドウは、レイアウトに使う寸法や間隔を変えません。
- 両方のシャドウは実際のプリセット値を使います。色は画像のスキームに適応しますが、オフセット、ぼかし、広がりの長さは変わりません。間隔の目盛りは確認用の注記です。
トークンのリストで最初のシャドウは、後のシャドウより手前に描かれます。shadow-inset は内側のシャドウを使い、6 段階のサイズは外側のシャドウを使います。これらのトークンは、サーフェスの色、角丸、重なり順、切り取りの方針を指定しません。
各 light-dark() の色は、要素で実際に使われるカラースキームが選びます。シャドウの長さを変えたり別のユーティリティクラスを使ったりせずに、描画だけを変えられます。場所ごとのスキームの選択は、カラーロールを参照してください。
シャドウを消すには、ネイティブ宣言の (box-shadow:none) を使います。内側と外側のシャドウを組み合わせるには、両方のリストを含む 1 つのトークンを定義します。別々のクラスでは結合されません。
関連項目： カラーロール、ネイティブシャドウの描画とレイアウト.
使用例
通常のサーフェスは低く保ち、その上に浮くものだけを持ち上げます。
Card
On the page
- Duplicate
- Rename
- Archive
<div> <article class="… shadow-xs"> <p>Card</p> <p>On the page</p> </article> <ul class="… shadow-lg"> <li>Duplicate</li> <li>Rename</li> <li>Archive</li> </ul></div>生成された CSS
@layer theme { :root, :host { --shadow-xs: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .04)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)); --shadow-lg: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .3)) }}@layer utilities { .shadow-lg { box-shadow: var(--shadow-lg) } .shadow-xs { box-shadow: var(--shadow-xs) }}カスタマイズ
プリセット値を変更したり、トークンを追加したりできます。--shadow-card を定義すると shadow-card が使えるようになります。
@theme { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5));}生成された CSS
@layer theme { :root, :host { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5)) }}@layer utilities { .shadow-card { box-shadow: var(--shadow-card) }}関連項目： テーマのディレクティブ、色.