zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

シャドウ

設定済みのボックスシャドウを適用するか、シャドウを取り除きます。

設定済みの box-shadow、任意の CSS box-shadow、または影なしを指定します。

クラスと CSS の早見表

クラスの例期待される宣言
shadow-panelbox-shadow: var(--zw-shadow-panel);
shadow-[0_12px_24px_#16324f33]box-shadow: 0 12px 24px #16324f33;
例の設定

共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。

使い方の例

名前付き、個別、影なしを比べる

最初のカードは panel トークン、次は検証済みの個別 box-shadow、最後は shadow-none を使います。

名前付き、個別、影なしを比べる
HTML
<div class="wind-demo-shadow-grid"><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-panel">Configured panel shadow</div><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-[0_12px_24px_#16324f33]">One-off CSS shadow</div><div class="wind-demo-shadow-card bg-panel text-ink p-3 shadow-none">No shadow</div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-shadow-panel: 0 6px 18px #16324f2e;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-shadow-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  max-width: 36rem;
  padding: .8rem;
  color: #16324f;
  font: 14px / 1.45 system-ui, sans-serif;
}

.wind-demo-shadow-card {
  min-width: 8rem;
}
.p-3 {
  padding-top: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
}
.text-ink {
  color: var(--zw-color-ink);
}
.bg-panel {
  background-color: var(--zw-color-panel);
}
.shadow-\[0_12px_24px_\#16324f33\] {
  box-shadow: 0 12px 24px #16324f33;
}
.shadow-none {
  box-shadow: none;
}
.shadow-panel {
  box-shadow: var(--zw-shadow-panel);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      },
      "shadows": {
        "panel": "0 6px 18px rgba(22, 50, 79, 0.18)"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-shadow-card": true,
      "wind-demo-shadow-grid": true
    },
    "safelist": {
      "docs-preview": [
        "bg-panel",
        "p-3",
        "shadow-[0_12px_24px_#16324f33]",
        "shadow-none",
        "shadow-panel",
        "text-ink"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-shadow-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; max-width: 36rem; padding: 0.8rem; color: #16324f; font: 14px/1.45 system-ui, sans-serif; }
.wind-demo-shadow-card { min-width: 8rem; }

任意値と名前付きの値

shadow-panel のような名前は tokens.shadows に設定した値だけを参照します。shadow-none は影なしのキーワードです。角括弧の値は CSS box-shadow として検証され、クラス内のアンダースコアは空白を表します。既定の影スケールも影用の不透明度修飾子もありません。カタログには ring ユーティリティもありません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

shadow

フィールド値
カタログ識別子v1.shadow
クラスパターンshadow-<suffix>
文法{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"box-shadow","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリshadows
負の値の規則forbidden
競合グループと順位shadow (33)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティbox-shadow

受け入れる値

種類接尾辞出力される値
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
box-shadowresolvednull

カタログの例

クラスの例期待される宣言
shadow-nonebox-shadow: none

Revision History

作成更新