CSS box-shadow: pehmeät, aidon tuntuiset varjot

CSS box-shadow kirjoitetaan box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): vaakasiirtymä, pystysiirtymä, sumennussäde, valinnainen laajeneminen ja väri. Yksi varjo riittää pikaprototyyppiin, mutta näyttää harvoin aidolta. Uskottava varjo kerrostetaan: samalla elementillä on useita edellistä suurempia ja heikompia varjoja, joiden väri sopii alla olevaan pintaan.

box-shadow-syntaksi

/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }

Miksi yksi varjo näyttää keinotekoiselta

Aseta kirja pöydälle ja katso varjoa. Kosketusreunalla se on tumma ja terävä. Kauempana se levenee ja heikkenee, sillä valo kiertää esinettä monesta suunnasta. Yksi box-shadow voi olla vain tiukka ja kova tai leveä ja sumea. Kummassakin silmä huomaa puutteen.

Miten kerrostat laatikkovarjot

Aloita pienestä terävästä varjosta ja kaksinkertaista siirtymä sekä sumennus jokaisessa kerroksessa. Pidä kerrokset heikkoina. Peittävyydet summautuvat päällekkäisillä alueilla, joten yksittäiset arvot voivat olla yllättävän pieniä.

1. 1

   Aloita kosketusvarjosta

   0 1px 1px noin 8 %:n peittävyydellä. Se on tumma viiva heti reunan alla.

2. 2

   Kaksinkertaista kerroksittain

   Sitten 0 2px 2px, 0 4px 4px ja 0 8px 8px. Siirtymä ja sumennus kasvavat yhdessä kuin valo tulisi ylhäältä.

3. 3

   Pidä kerrokset heikkoina

   5-10 % kullekin. Jos tulos on raskas, poista suurin kerros ennen tummennusta.

4. 4

   Sävytä väri

   Korvaa musta tummalla taustasävyllä, kuten laivastonsinisellä sinisillä sivuilla tai ruskealla kermapohjalla.

:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }

Muuttujiin tallennetut varjot ovat suunnittelutokeneita, jotka yhtenäistävät kortit, valikot ja dialogit. CSS-muuttujat teemoissa ja suunnittelutokenit näyttää liittämisen kokonaiseen teemaan.

Käyttöliittymän korkeusasteikko

Varjo viestii korkeudesta, joten merkityksen pitää pysyä samana kaikkialla. Valitse kolme tai neljä tasoa ja määritä käyttötarkoitukset. Korkeampi pinta saa suuremman ja pehmeämmän varjon, ei vain tummempaa.

Varjot värikkäillä ja tummilla taustoilla

Puhdas musta muuttuu väripinnalla harmaaksi ja sameaksi kuten maaliin sekoitettu musta. Ota varjoväri taustasta: tumma sinivihreä mintulle, tumma luumu lilalle. Liukuväritaustalla valitse tummin väripiste ja käytä sitä heikolla peittävyydellä.

Tummassa teemassa varjo lähes katoaa, sillä peitettävää valoa on vähän. Näytä korkeus vaalentamalla kohotettuja pintoja ja säilytä heikko reunaviiva. Tumman teeman suunnittelu käsittelee pintavärejä. Kuvan yllä kelluvassa paneelissa backdrop-filter erottaa kerrokset usein raskasta varjoa paremmin.

box-shadow-animaatio ilman nykimistä

Osoittimen alla muuttuva box-shadow pakottaa selaimen piirtämään varjon uudelleen jokaisella siirtymän ruudulla. Yksi painike toimii, viidenkymmenen kortin ruudukko nykii. Aseta suurempi varjo pseudoelementtiin ja häivytä sen opacity-arvoa, jonka selain yhdistää kevyesti.

.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

Piirtokustannuksia käsittelee CSS-liukuvärien suorituskyky. Sama kerrostus sopii artikkelin CSS-liukuväripainikkeet painikkeisiin.

Milloin jätät varjon pois

Varjo erottaa pinnan taustasta. Rikas liukuväri tai valokuva kilpailee vahvan varjon kanssa. Rauhallisempi tausta auttaa korttia usein enemmän. Gradientlyn Markit rakentuvat tästä: elävä tausta omilla väreillä, valolla ja rakeisuudella rauhoittuu sanojen takana ja pitää ne luettavina ilman laatikoita tai varjoja.