ビジュアル エフェクト

奥行きと質感

• 複数のシャドウを重ねて、リアルでソフトな奥行き効果を実現します。
• 長方形以外の形状や透明な PNG には、box-shadow ではなく filter: drop-shadow() を使用します。
• ライティング オーバーレイに mix-blend-mode と background-blend-mode を使用する（isolation: isolate でスコープを制限する）

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

勾配と color-mix()

in oklch または in oklab を使用して、グラデーションまたは color-mix() の補間色空間を明示的に指定します。

• in oklch は彩度をより適切に保持しますが、特に色の違いが大きい場合、デバイスの色域から外れやすくなります。
• in oklab は色域内にとどまりやすい（色域内のエンドポイントを想定）ですが、特に反対の色相間で補間する場合に、中央で彩度の低い色が作成されることがあります。
• 特定の理由（srgb で補間する必要があるカラー選択ツールを構築しているなど）がない限り、in srgb は使用しないでください。

フォールバック

2024 年より前のブラウザの一部は、グラデーション カラー補間空間をサポートしていません。これらのブラウザをサポートするには、変数を使用して、トークンの使用が安全な場合にのみトークンを使用します。

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

次のように使用します。

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• 重要: この手法を使用する場合は、空でないグラデーション プリアンブルが常に存在することを確認してください。そうしないと、古いブラウザで構文エラーが発生します。
• color-mix() には必要ありません。ブラウザが color-mix() をサポートしている場合、その in <color-space> 引数もサポートしています。

パターン

多くのパターンは、CSS グラデーションとハードストップを使用して作成できます。これらは、周囲のコンテキストから CSS 変数と長さにアクセスできるため、SVG や外部画像よりも柔軟でパフォーマンスに優れています。位置を 2 回繰り返す必要はありません。0 または 0% を使用するだけで、グラデーションの修正によって自動的に調整されます。

以下に例を示します。

幅 1em の縦縞:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

それぞれ幅 1em の対角線状ストライプ:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

1em 個の正方形からなるチェッカーボード パターン:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

半径 .5em のドットが 2em の間隔（水平 / 垂直 - 対角線の距離は sqrt(2) を掛ける）で配置された水玉模様:

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

シンプルな円グラフ:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

重要: グラデーションを使用してグラフをレンダリングする場合は、スクリーン リーダー用のテキスト フォールバックを用意してください。必須: ユーザー補助機能のコーディング ガイドラインの代替テキストとメディアのガイドラインに記載されているとおり、アクセス可能な代替手段としてセマンティック データテーブルを提供する必要があります。