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; }
Glühender Texteffekt
h1 { text-shadow: 0 0 4px #00FF9C; }
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; }
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); }
Mehr Informationen:
- MDN-Webdokumente
- Überprüfen Sie die Browserunterstützung
- CSS-Box-Shadow-Generator (Sie können gerne mit Box-Shadows experimentieren)