CSS Text Shadow og Box Shadow Effects (med eksempler)

Med CSS3 kan du oprette to typer skygger: text-shadow(tilføjer skygge til tekst) og box-shadow(tilføjer skygge til andre elementer).

CSS3 tekstskygge

Den text-shadowegenskab kan tage op til fire værdier:

  • den vandrette skygge
  • den lodrette skygge
  • sløringseffekten
  • farven
Eksempler:

Normal tekstskygge

h1 { text-shadow: 2px 2px 5px crimson; }
Eksempel på normal tekstskygge

Glødende teksteffekt

h1 { text-shadow: 0 0 4px #00FF9C; }
Glødende teksteksempel

Flere skygger

For at opnå dette skal du blot tilføje et komma mellem to (eller flere) sæt værdier:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Flere eksempler på skygger med hvid tekst

CSS3 Box Shadow

Den box-shadowegenskab kan tage op til seks værdier:

  • (valgfrit) insetnøgleordet (ændrer skyggen til en inden i rammen)
  • den vandrette skygge
  • den lodrette skygge
  • sløringseffekten
  • spredningen
  • farven
Eksempler:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Box-shadow eksempler

Mere information:

  • MDN-webdokumenter
  • Se efter browsersupport
  • CSS box-shadow generator (du er velkommen til at eksperimentere med box-shadows)