このページの中身

影

光の向き・柔らかさ・濃さの感覚のつまみから3段の影を作り、--shadow-1〜3 として持ち帰る。参考にした作業面: Comeau Shadow Palette、shadows.brumm.af。

つまみ#

光の位置。掴んで動かすと向きが変わります

見本#

持ち帰る#

:root {
  --shadow-1: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.05);
  --shadow-2: 0 1px 2px hsl(40 20% 20% / 0.08), 0 2px 4px hsl(40 20% 20% / 0.06), 0 6px 12px hsl(40 20% 20% / 0.05);
  --shadow-3: 0 2px 4px hsl(40 20% 20% / 0.08), 0 6px 12px hsl(40 20% 20% / 0.06), 0 14px 28px hsl(40 20% 20% / 0.05), 0 28px 56px hsl(40 20% 20% / 0.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-1: 0 1px 2px hsl(40 20% 4% / 0.4);
    --shadow-2: 0 2px 6px hsl(40 20% 4% / 0.45);
    --shadow-3: 0 6px 18px hsl(40 20% 4% / 0.5);
  }
}

つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。