7.1 Eigenschaft text-shadow
Die CSS-Eigenschaft text-shadow ermöglicht es, Textschatten hinzuzufügen, um einen dreidimensionalen Effekt zu erzeugen und die visuelle Wahrnehmung zu verbessern. Diese Eigenschaft bietet Flexibilität bei der Anpassung von Schatten, einschließlich der Kontrolle von Verschiebung, Unschärfe und Farbe des Schattens.
Die Eigenschaft text-shadow bestimmt den Schatten für Text innerhalb eines Elements. Sie ermöglicht es, die Position, Unschärfe und Farbe des Schattens zu kontrollieren und so einen visuellen Akzent zu Textelelementen hinzuzufügen.
Syntax:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parameter:
offset-x: horizontale Verschiebung des Schattensoffset-y: vertikale Verschiebung des Schattensblur-radius: Unschärferadius des Schattens (optional)color: Farbe des Schattens (optional)
Werte:
offset-xundoffset-y: bestimmen die Verschiebung des Schattens relativ zum Text. Können positive oder negative Werte habenblur-radius: definiert das Maß der Unschärfe des Schattens. Je größer der Wert, desto verschwommener der Schatten. Der Standardwert ist 0 (ohne Unschärfe)color: legt die Farbe des Schattens fest. Wenn die Farbe nicht spezifiziert ist, wird die Farbe des Textes verwendet
Beispiel:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Einfacher Schatten</p>
<p class="shadow-blur">Schatten mit Unschärfe</p>
<p class="shadow-color">Schatten mit Farbe</p>
<p class="shadow-multiple">Mehrere Schatten</p>
</body>
Code-Erklärung:
.shadow-basic: wendet einen einfachen Schatten mit einer Verschiebung von2pxhorizontal und vertikal, einem Unschärferadius von2pxund einer halbtransparenten schwarzen Farbe an.shadow-blur: fügt eine größere Unschärfe hinzu (5px), die einen verschwommenen Schatten erzeugt.shadow-color: wendet einen Schatten mit Farbe (rot) an.shadow-multiple: wendet zwei Schatten mit unterschiedlichen Verschiebungen und Unschärfen an, um einen komplexen, mehrschichtigen Effekt zu erzeugen
7.2 Beispiele
1. Weicher Schatten
Ein weicher Schatten mit einem großen Unschärferadius:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Weicher Textschatten</p>
</body>
Code-Erklärung:
.soft-shadow: wendet einen weichen Schatten ohne Verschiebung und mit einem großen Unschärferadius (10px) an, um einen sanft leuchtenden Effekt um den Text zu erzeugen
2. Heller Schatten
Ein Schatten mit heller Farbe und geringer Unschärfe:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Schatten mit heller Farbe</p>
</body>
Code-Erklärung:
.colorful-shadow: wendet einen Schatten mit heller Farbe (blau), einer Verschiebung von3pxund einem Unschärferadius von5pxan
3. Mehrere Schatten
Mehrere Schatten mit unterschiedlichen Parametern:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Mehrere Textschatten</p>
</body>
Code-Erklärung:
.multi-shadow: wendet zwei Schatten mit unterschiedlichen Parametern an: einen mit kleiner Verschiebung und Unschärfe und einen anderen mit großer Verschiebung und roter Unschärfe
7.3 Wichtige Punkte
Wichtige Punkte bei der Verwendung von text-shadow
Browser-Kompatibilität
Die Eigenschaft text-shadow wird von allen modernen Browsern unterstützt, einschließlich Google Chrome, Firefox, Safari, Edge und Opera. Es ist jedoch wichtig, die Anzeige der Schatten in älteren Browserversionen zu überprüfen, um die Browserkompatibilität sicherzustellen.
Leistung
Die Verwendung komplexer Schatten mit vielen Verschiebungen und Unschärfe kann die Leistung beeinträchtigen, insbesondere auf mobilen Geräten. Optimiere die Schatten für bessere Leistung und teste auf verschiedenen Geräten.
Barrierefreiheit
Stelle sicher, dass die Schatten die Lesbarkeit des Textes nicht beeinträchtigen. Der Kontrast zwischen Text und Hintergrund sollte für alle Nutzer ausreichend bleiben, einschließlich Menschen mit Sehbehinderungen.
Die Eigenschaft text-shadow bietet solide Werkzeuge zum Erstellen von Textschatten in CSS. Sie ermöglicht es, verschiedene Effekte hinzuzufügen, von einfachen bis zu komplexen mehrschichtigen Schatten mit unterschiedlichen Farben und Unschärfen.
Die Verwendung von text-shadow hilft, die visuelle Wahrnehmung des Textes zu verbessern, indem Tiefe und Volumen zum Design von Webseiten hinzugefügt werden. Es ist wichtig, die Browser-Kompatibilität und Leistung bei der Anwendung komplexer Schatten zu beachten, sowie die Zugänglichkeit für alle Nutzer sicherzustellen.
GO TO FULL VERSION