カード
ページ上の面を、背景から少しだけ分ける。
var(--elevation-1)CSS DESIGN SYSTEM · BOX SHADOW
CSS Elevation System Builder
影を一つずつ決めず、6段階のルールにまとめる。
01LEVEL 0–5
LIVE ELEVATION BUILDER
プリセットを選んで、影の段階を調整する
PREVIEW
6段階を並べて比較する
LOW ELEVATIONHIGH ELEVATION
SELECTED LEVEL
Level 3
Level 0は影なし。選択した段階を、下のUIの見た目にも適用します。
02
ONE SYSTEM, MULTIPLE USES
同じ影のスケールを、UI全体で使う
メニュー
ほかの要素の上に開いたことを伝える。
var(--elevation-3)ダイアログ
画面の一番手前にあることを示す。
var(--elevation-5)Material 3プリセットについて
公式Material WebのLevel 0〜5で使われる2層の影の寸法・不透明度を参考に、単一要素へ貼り付けやすいbox-shadowへ変換しています。公式コンポーネントのCSSそのものではありません。Soft・Hard・Crispは、このデモ用のオリジナル作例です。