CSS-Textschatten- und Boxschatteneffekte (mit Beispielen)

Mit CSS3 können Sie zwei Arten von Schatten erstellen: text-shadow(fügt dem Text Schatten hinzu) und box-shadow(fügt anderen Elementen Schatten hinzu).

CSS3-Textschatten

Die text-shadowEigenschaft kann bis zu vier Werte annehmen:

  • der horizontale Schatten
  • der vertikale Schatten
  • der Unschärfeeffekt
  • die Farbe
Beispiele:

Normaler Textschatten

h1 { text-shadow: 2px 2px 5px crimson; }
Beispiel für einen normalen Textschatten

Glühender Texteffekt

h1 { text-shadow: 0 0 4px #00FF9C; }
Beispiel für leuchtenden Text

Mehrere Schatten

Um dies zu erreichen, fügen Sie einfach ein Komma zwischen zwei (oder mehr) Wertesätzen ein:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Beispiel für mehrere Schatten mit weißem Text

CSS3 Box Shadow

Die box-shadowEigenschaft kann bis zu sechs Werte annehmen:

  • (optional) das insetSchlüsselwort (ändert den Schatten in einen innerhalb des Rahmens)
  • der horizontale Schatten
  • der vertikale Schatten
  • der Unschärfeeffekt
  • die Ausbreitung
  • die Farbe
Beispiele:
.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-Beispiele

Mehr Informationen:

  • MDN-Webdokumente
  • Überprüfen Sie die Browserunterstützung
  • CSS-Box-Shadow-Generator (Sie können gerne mit Box-Shadows experimentieren)