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.