Tekstskygge i CSS: syntaks, eksempler og bedre alternativer

En tekstskygge i CSS skrives text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): en vannrett forskyvning, en loddrett forskyvning, en valgfri uskarphetsradius og en farge. Skill flere skygger med komma for å legge dem i lag. Den er utmerket til dekorative effekter som skarpe, forskjøvne overskrifter, lange skygger og falske konturer. Den er et dårlig verktøy for å gjøre tekst lesbar over et urolig foto, og de bedre alternativene for det står lenger ned.

Syntaksen for text-shadow

/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }

Skyggen males bak teksten og får formen til hver glyf, også understrekinger og dekorasjoner. Den endrer ikke oppsettet: en stor forskyvning kan flyte utenfor elementet og overlappe naboer uten å skyve dem unna, så sett av plass med padding hvis skyggen er stor.

Eksempler på tekstskygge verdt å kopiere

Stilene som holder, er de med skarpe kanter. En skygge uten uskarphet leses som et bevisst grafisk valg; en myk, grå uskarphet under brødtekst leses gjerne som en feil.

/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }

Retroforskyvninger og lange skygger vises i retro teksteffekter og 3D-teksteffekter. For en ren kontur bør du heller bruke -webkit-text-stroke med paint-order: stroke fill enn det gamle trikset med fire skygger i hvert hjørne, som etterlater hull i kurvene; konturtekst viser begge.

Hvorfor en myk skygge er en svak løsning for lesbarhet

Den vanlige bruken av text-shadow er en mørk uskarphet bak hvit tekst over et foto, i håp om å skille de to. Det hjelper litt i kantene på hver bokstav og ingenting for rommet inni dem, der fotoet fortsatt skinner gjennom med full styrke. Skru opp uskarpheten og opasiteten til det virker, og du får en flekk rundt hvert ord. Glød rundt tekst, lys eller mørk, ser utdatert ut og svikter fortsatt på de lyseste delene av bildet.

Kontrastsjekkere ignorerer også skygger. De måler tekstfargen mot bakgrunnsfargen, så en overskrift som bare består takket være skyggen, blir flagget i en revisjon, og med god grunn. Tersklene står i fargekontrast og tilgjengelighet.

Bedre alternativer for tekst på bilder og gradienter

En scrim er en gradient som bare gjør den delen av bildet som ligger bak teksten mørkere, og som tones ut til ingenting ellers. Den holder fotoet lyst der det betyr noe, og gir hver bokstav den samme rolige grunnen. Gradientoverlegg i CSS går gjennom lagene i detalj.

.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Andre pålitelige alternativer: kjør bildet gjennom filter: brightness(0.75) på et eget lag, beskjær så ordene havner på himmel eller vegg i stedet for detaljer, eller sett teksten på et ensfarget bånd. Tekst over bilder går gjennom hvert av dem med eksempler.

Dette er nøyaktig jobben Marks fra Gradiently gjør av seg selv: det roligste området flytter seg bak ordene dine, og Auto-tekstfarge velger lys eller mørk skrift linje for linje, uten skygge, boks eller uskarphet. Når du vil ha skygge som pynt og ikke som reparasjon, gir bokstavbehandlinger som Uttrekk, Dobbel og Spor deg forskjøvne stiler uten at du skriver en eneste skygge.

Tekstskygge på gradienttekst

Gradienttekst lages med background-clip: text og en gjennomsiktig tekstfarge. Legger du til en text-shadow, synes skyggen rett gjennom de gjennomsiktige bokstavene og grumser til gradienten innenfra. Løsningen er å legge skyggen på elementet i stedet: filter: drop-shadow(3px 3px 0 #1e1b4b) følger den malte formen på bokstavene og ligger bak dem. Selve teknikken står i gradienttekst i CSS.

Ytelse og animasjon

Skarpe skygger er billige. Store uskarphetsradier på lange tekstpartier koster mer å male, og å animere text-shadow maler teksten på nytt i hver bilderute. Vil du animere en overskrift, flytt den med transform og la skyggen stå fast.