CSS skyggeeffekter

Kaffe
Skygger

Opret skygger med CSS!

Hover over mig!

CSS skyggeeffekter

Ved hjælp af CSS kan du tilføje skygger til tekst og elementer.

I vores tutorial vil du lære følgende egenskaber:

  • text-shadow
  • box-shadow

CSS tekstskygger

CSS text-shadow Egenskaben tilføjer skygger til teksten.

Den mest enkle brug er kun at specificere horisontal skygge (2px) og vertikal skygge (2px):

Tekstskyggeeffekt!

Eksempel

h1 {
  text-shadow: 2px 2px;
{}

Prøv selv

Tilføj farve til skyggerne nedenfor:

Tekstskyggeeffekt!

Eksempel

h1 {
  text-shadow: 2px 2px red;
{}

Prøv selv

Tilføj derefter en blødgørende effekt til skyggerne:

Tekstskyggeeffekt!

Eksempel

h1 {
  text-shadow: 2px 2px 5px red;
{}

Prøv selv

Dette eksempelet viser hvid tekst med sort skygge:

Tekstskyggeeffekt!

Eksempel

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
{}

Prøv selv

Dette eksempelet viser neon-effekter med røde skygger:

Tekstskyggeeffekt!

Eksempel

h1 {
  text-shadow: 0 0 3px #FF0000;
{}

Prøv selv

Flere skygger

For at tilføje flere skygger til teksten, kan du tilføje en liste af skygger adskilt af kommaer.

Dette eksempelet viser neon-effekter med røde og blå skygger:

Tekstskyggeeffekt!

Eksempel

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
{}

Prøv selv

Følgende eksempel viser hvit tekst med svarte, blå og mørkeblå skygger:

Tekstskyggeeffekt!

Eksempel

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
{}

Prøv selv

Du kan også bruke text-shadow-egenskapen til å lage en ren kant (uten skygger) rundt tekst:

Omsluttende tekstbokser!

Eksempel

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
{}

Prøv selv