Was ist ein Box-Shadow-Generator?
Ein CSS-Box-Shadow-Generator hilft dir, Tiefeneffekte für HTML-Elemente zu erstellen. Er ermöglicht es dir, horizontale und vertikale Versätze, Unschärferadius, Ausbreitungsradius und Farbe zu konfigurieren und generiert dann den CSS-box-shadow-Eigenschaftscode.
So verwendest du diesen Box-Shadow-Generator
- Gib Werte für X-Versatz, Y-Versatz, Unschärfe, Ausbreitung (in Pixeln) und Schattenfarbe ein (z. B. rgba(0,0,0,0.3)). Der CSS-Code wird automatisch aktualisiert, während du eingibst.
- Klicke auf „Generieren", um eine zufällige Schattenvoreinstellung zum schnellen Experimentieren zu laden.
- Kopiere die generierte CSS-box-shadow-Eigenschaft, um sie in deinem Stylesheet zu verwenden.
Wichtige Konzepte
Die CSS-box-shadow-Syntax ist: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Ein positiver X-Wert verschiebt nach rechts, ein positiver Y-Wert nach unten. Der Unschärferadius erzeugt Weichheit; der Ausbreitungsradius erweitert oder verkleinert den Schatten. Mehrere Schatten können überlagert werden (durch Kommas getrennt), um realistische Tiefe zu erzeugen. Das Schlüsselwort inset erzeugt innere Schatten.
Häufig gestellte Fragen
Wie erstelle ich einen realistischen Schatten?
Verwende subtile Versätze (2–8 px), moderate Unschärfe (10–30 px), negative Ausbreitung für engere Schatten und halbtransparentes Schwarz (rgba(0,0,0,0.1–0.3)). Lagere mehrere Schatten bei verschiedenen Versätzen übereinander, um Tiefe zu erzeugen.
Kann ich mehrere Schatten zu einem Element hinzufügen?
Ja. Trenne mehrere Schattenwerte durch Kommas. Der erste Schatten in der Liste wird oben angezeigt. Diese Technik erzeugt überlagerte, realistische Schatteneffekte.
Beeinflusst box-shadow das Layout?
Nein. Box-Schatten sind rein visuell und beeinflussen nicht das Box-Modell oder das Layout des Elements. Sie können in benachbarte Elemente übergeben, daher verwende Überfluss- oder Margin-Anpassungen, falls erforderlich.