CSS box shadow: bløde, lagdelte skygger, der ser ægte ud

En CSS box shadow skrives box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): en vandret forskydning, en lodret forskydning, en sløringsradius, en valgfri spredning og en farve. Den ene skygge er fin til en hurtig prototype, men den ser sjældent ægte ud. De skygger, der overbeviser øjet, ligger i lag: flere skygger på ét element, hver større og svagere end den forrige, tonet til at passe til overfladen under.

box-shadow-syntaks

/* 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); }

Hvorfor en enkelt skygge ser falsk ud

Læg en bog på et bord, og se på dens skygge. Lige ved kanten, hvor den rører, er skyggen mørk og skarp. Længere ude bliver den bred og svag, fordi lys omslutter genstanden fra mange retninger. Én box-shadow kan kun være en af de ting ad gangen: stram og hård eller bred og sløret. Uanset hvad opdager øjet, at der mangler noget.

Sådan lægger du box shadows i lag

Metoden er enkel: start småt og skarpt, og fordobl så forskydning og sløring for hvert ekstra lag, mens hvert lag holdes svagt. Opaciteterne lægger sig sammen, hvor lagene overlapper, så de enkelte værdier kan være overraskende lave.

1. 1

   Start med en kontaktskygge

   0 1px 1px ved omkring 8 procent opacitet. Det er den mørke streg lige under kanten.

2. 2

   Fordobl for hvert lag

   Derefter 0 2px 2px, 0 4px 4px, 0 8px 8px. Forskydning og sløring vokser sammen, så lyset ser ud til at komme ovenfra.

3. 3

   Hold hvert lag svagt

   Mellem 5 og 10 procent hver. Ser resultatet tungt ud, så fjern det største lag, før du gør noget mørkere.

4. 4

   Tone farven

   Erstat sort med en dyb udgave af baggrundens farvetone, for eksempel en marineblå på blå sider eller en brun på creme.

: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); }

At gemme skygger som variabler gør dem til design tokens, som holder hvert kort, hver menu og hver dialog ensartet. CSS-variabler til temaer og design tokens viser, hvordan du kobler dem ind i et helt tema.

En højdeskala til en brugerflade

Skygge er et signal om højde, så den bør betyde det samme overalt. Vælg tre eller fire niveauer, og tildel dem opgaver. Alt, der svæver højere, får en større, blødere skygge, aldrig bare en mørkere.

Skygger på farvede og mørke baggrunde

Rent sorte skygger bliver grå og mudrede på en farvet overflade, på samme måde som sort blandet i maling gør den kedelig. Tag i stedet skyggefarven fra baggrunden: en dyb blågrøn skygge på en mynteside, en mørk blomme på en lilla. På gradientbaggrunde skal du vælge gradientens mørkeste stop og bruge det ved lav opacitet.

I mørk tilstand forsvinder skygger næsten, fordi der er lidt lys, de kan blokere. Vis højde ved i stedet at gøre hævede overflader en smule lysere, og behold en svag hårstreg ved kanten. Design af mørk tilstand gennemgår overfladefarverne. Til paneler, der svæver over billeder, adskiller et backdrop filter ofte lagene bedre end en kraftigere skygge.

At animere box-shadow uden hak

At ændre box-shadow ved hover tvinger browseren til at tegne skyggen forfra i hver frame af overgangen. På én knap er det fint. På et grid med halvtreds kort hakker det. Den almindelige løsning er at lægge den større skygge på et pseudoelement og tone dets opacitet, som browseren kan sammensætte billigt.

.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; }
}

Mere om, hvad der koster maletid, står i CSS gradient-ydeevne, og den samme lagdelte tilgang passer til knapper i gradientknapper i CSS.

Hvornår du skal springe skyggen over

Skygger adskiller en overflade fra det, der er bag den. Er baggrunden en rig gradient eller et fotografi, kæmper en stærk skygge imod den. Ofte gør en roligere baggrund mere for kortet, end nogen skygge kan. Marks fra Gradiently er bygget til det: hver er en levende baggrund med sine egne farver, sit eget lys og korn, og de ord, du lægger over den, forbliver læselige, fordi Marken beroliger sig selv bag dem, uden bokse eller skygger, der gør arbejdet.