CSS-Schatten
CSS-Schatten verleihen Elementen visuelle Tiefe. Die Eigenschaft box-shadow gilt für Boxen, während text-shadow für Texte verwendet wird. Damit lassen sich Inhalte hervorheben und ansprechende Designs erstellen.
Einfaches Beispiel für box-shadow
Im folgenden Beispiel fügen wir einer Box einen Schatten hinzu, der nach rechts und unten fällt, leicht verschwommen. Die Farbe des Schattens ist halbtransparentes Schwarz.
Das Beispiel zeigt die grundlegende Verwendung der Eigenschaft box-shadow.
Die Syntax von box-shadow
box-shadow besteht aus mehreren Parametern: horizontaler und vertikaler Versatz, Unschärfe, Ausbreitung und Farbe. Mit diesen Kombinationen lassen sich verschiedene Effekte erzielen.
| Parameter | Beschreibung |
|---|---|
| h-offset | Der horizontale Versatz des Schattens. |
| v-offset | Der vertikale Versatz des Schattens. |
| blur-radius | Der Unschärferadius des Schattens. |
| spread-radius | Der Ausbreitungsradius des Schattens. |
| color | Die Farbe des Schattens. |
Tipps für die Verwendung von Schatten
Schatten sollten sparsam verwendet werden, um einen natürlichen Effekt zu erzielen und die Lesbarkeit nicht zu beeinträchtigen.
- Verwende subtile Schatten für ein natürliches Erscheinungsbild.
- Kombiniere mehrere Schatten auf einem Element für mehr Tiefe.
- Übertreibe es nicht mit Schatten, da sie die Klarheit des Designs beeinträchtigen können.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.