Text Schatten#
CSS text-shadow ist eine Eigenschaft, die es ermöglicht, Schatten um Text herum zu erstellen.
Die Syntax für text-shadow lautet:
text-shadow: none | x-offset y-offset blur color;
Eigenschaftswert |
Erklärung |
|---|---|
none |
Kein Textschatten |
x-offset |
Wie weit in px soll der Schatten auf der X-Achse verschoben sein (auch negative Werte möglich). |
y-offset |
Wie weit in px soll der Schatten auf der Y-Achse verschoben sein (auch negative Werte möglich). |
blur |
Optional. Der Weichzeichnungsradius. Je höher die Angabe in px, desto verschwommener wird der Schatten. |
color |
Die Farbe des Schatten (Farbname, HEX-Wert, RGB(A)-Wert). |
Einfacher Textschatten#
Der folgenden Code erstellt einen Schatten mit einem Offset von 2 Pixeln in horizontaler und vertikaler Richtung und einer rote Farbe um den Text im h1-Element.
h1 {
text-shadow: 2px 2px red;
}
Text Shadow
Der Schatten wird im nächsten Beispiel durch den blur Wert um 10 Pixel weichgezeichnet.
h1 {
text-shadow: 2px 2px 10px red;
}
Text Shadow
Weiteres Beispiel mit einer stärkeren Weichzeichnung von 20px und weiter verschoben auf der x-Achse/y-Achse.
h1 {
text-shadow: 40px 20px 20px red;
}
Text Shadow
Mehrere Textschatten#
Der nächste Code erstellt zwei Schatten um den Text im h1-Element. Der erste Schatten hat einen
Offset von 2 Pixeln in horizontaler und vertikaler Richtung,
eine Unschärfe von 2 Pixeln und
eine aqua Farbe.
Der zweite Schatten hat einen
Offset von -2 Pixeln in horizontaler und vertikaler Richtung,
eine Unschärfe von 2 Pixeln und
eine crimson Farbe.
h1 {
text-shadow: 2px 2px 2px aqua, -2px -2px 2px crimson;
}
Text Shadow
Textschatten mit unterschiedlichen Unschärfen#
Nun werden drei Schatten um den Text im h1-Elementerstellt erstellt. Der erste Schatten hat einen
Offset von 2 Pixeln in horizontaler und vertikaler Richtung,
eine Unschärfe von 2 Pixeln und
eine aqua Farbe.
Der zweite Schatten hat einen
Offset von 4 Pixeln in horizontaler und vertikaler Richtung,
eine Unschärfe von 4 Pixeln und
eine rebeccapurple Farbe.
Der dritte Schatten hat einen
Offset von 6 Pixeln in horizontaler und vertikaler Richtung,
eine Unschärfe von 6 Pixeln und
eine crimson Farbe.
h1 {
text-shadow: 2px 2px 2px aqua, 4px 4px 40px rebeccapurple, 6px 6px 6px crimson;
}