6.1 Das box-shadow Property
Das box-shadow Property in CSS wird verwendet, um Elementen Schatten hinzuzufügen. Dieses Property ermöglicht es, vielfältige visuelle Effekte zu erzeugen und das Erscheinungsbild von Webseiten zu verbessern. Lass uns den Syntax, die Werte und Beispiele zur Verwendung von box-shadow im Detail betrachten.
Syntax von box-shadow
Das box-shadow Property nimmt einen oder mehrere Werte, von denen jeder die Parameter des Schattens festlegt. Der allgemeine Syntax sieht so aus:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Werte:
offset-x: horizontale Verschiebung des Schattens. Positive Werte verschieben den Schatten nach rechts, negative nach linksoffset-y: vertikale Verschiebung des Schattens. Positive Werte verschieben den Schatten nach unten, negative nach obenblur-radius: Unschärferadius des Schattens. Je größer der Wert, desto unschärfer der Schatten. Standardwert ist 0 (Schatten ohne Unschärfe)spread-radius: Ausbreitungsradius des Schattens. Positive Werte vergrößern den Schatten, negative verkleinern ihn. Standardwert ist 0color: Farbe des Schattens. Alle CSS-Farbformate werden unterstützt
6.2 Anwendungsbeispiele
Grundlegender Schatten:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Grundlegender Schatten</div>
</body>
Schatten mit Unschärfe:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Schatten mit Unschärfe</div>
</body>
Schatten mit Ausbreitung:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Schatten mit Ausbreitung</div>
</body>
Innerer Schatten:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Innerer Schatten</div>
</body>
6.3 Einstellungen von box-shadow
Details zur Konfiguration von box-shadow:
Schattenverschiebung (offset-x und offset-y)
- Positive Werte: Der Schatten wird nach rechts (
offset-x) und unten (offset-y) verschoben - Negative Werte: Der Schatten wird nach links (
offset-x) und oben (offset-y) verschoben
Unschärfe des Schattens (blur-radius)
- Wert 0: Der Schatten ist scharf, ohne Unschärfe
- Positive Werte: Je größer der Wert, desto unschärfer der Schatten
Ausbreitung des Schattens (spread-radius)
- Positive Werte: Der Schatten wird größer
- Negative Werte: Der Schatten wird kleiner
Farbe des Schattens (color)
Die Farbe kann in verschiedenen Formaten angegeben werden: Farbnamen, Hex-Code, RGB, RGBA, HSL, HSLA.
Innerer Schatten (inset)
Das Schlüsselwort inset erzeugt einen Schatten innerhalb eines Elements, was für einen vertieften Effekt verwendet werden kann.
Mehrere Schatten mit unterschiedlichen Parametern:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Mehrere Schatten</div>
</body>
GO TO FULL VERSION