Schatten für Tiefe und Stil Hinzufügen
Box-Shadows können verwendet werden, um einen visuellen Effekt zu erzeugen, bei dem ein Element scheinbar über dem Hintergrund schwebt. Dieser Effekt verleiht Tiefe, hebt bestimmte Elemente hervor und sorgt für visuelles Interesse auf einer Webseite. Um diesen Effekt zu erzielen, kann die Eigenschaft box-shadow angewendet werden.
box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;
offset-xbezeichnet die horizontale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links;offset-ybezeichnet die vertikale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben;blur-radiuslegt den Grad der Unschärfe des Schattens fest und ist optional; ein höherer Wert erzeugt einen stärker verschwommenen Schatten;spread-radiusist ebenfalls optional und vergrößert oder verkleinert die Größe des Schattens je nach positivem oder negativem Wert;colorgibt die Farbe des Schattens in jedem gültigen Farbformat an und ist ebenfalls optional.
index.html
index.css
Hinweis
Um den am besten geeigneten Schatten zu finden, besuchen Sie die Quelle Schatten-Generator.
Zusätzlich zu box-shadow ermöglichen die Eigenschaften text-shadow und drop-shadow das Erstellen von Schatten für Text bzw. andere Elemente. Sie funktionieren auf die gleiche Weise wie die Eigenschaft box-shadow. Allerdings werden diese Eigenschaften im Vergleich zu box-shadow. seltener verwendet.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me some examples of box-shadow usage?
What are some best practices for using shadows in web design?
How do I use text-shadow and drop-shadow in CSS?
Awesome!
Completion rate improved to 2.56Schatten für Tiefe und Stil Hinzufügen
Swipe um das Menü anzuzeigen
Box-Shadows können verwendet werden, um einen visuellen Effekt zu erzeugen, bei dem ein Element scheinbar über dem Hintergrund schwebt. Dieser Effekt verleiht Tiefe, hebt bestimmte Elemente hervor und sorgt für visuelles Interesse auf einer Webseite. Um diesen Effekt zu erzielen, kann die Eigenschaft box-shadow angewendet werden.
box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;
offset-xbezeichnet die horizontale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links;offset-ybezeichnet die vertikale Positionierung des Schattens; ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben;blur-radiuslegt den Grad der Unschärfe des Schattens fest und ist optional; ein höherer Wert erzeugt einen stärker verschwommenen Schatten;spread-radiusist ebenfalls optional und vergrößert oder verkleinert die Größe des Schattens je nach positivem oder negativem Wert;colorgibt die Farbe des Schattens in jedem gültigen Farbformat an und ist ebenfalls optional.
index.html
index.css
Hinweis
Um den am besten geeigneten Schatten zu finden, besuchen Sie die Quelle Schatten-Generator.
Zusätzlich zu box-shadow ermöglichen die Eigenschaften text-shadow und drop-shadow das Erstellen von Schatten für Text bzw. andere Elemente. Sie funktionieren auf die gleiche Weise wie die Eigenschaft box-shadow. Allerdings werden diese Eigenschaften im Vergleich zu box-shadow. seltener verwendet.
Danke für Ihr Feedback!
