Textschatten mit text-shadow erstellen
Mit ein Grund, weshalb viele Entwickler in früheren Zeiten Hyperlinks mit Bildern erstellt haben statt als reine Textlinks, waren die Schatteneffekte. Diese waren zwar in CSS2 möglich, wurden aber in CSS2.1 wieder entfernt und in CSS3 wieder in den Spezifikationen aufgenommen, sodass man auf Bilder komplett verzichten kann, die man wegen den Schatteneffekten verwendete. Der Text auf der folgenden Abbildung ist allein mit CSS erstellt worden.
Um die Texte mit einem Schatten zu versehen, verwendet man die Eigenschaft text-shadow. Der Wert besteht aus bis zu vier Angaben, die nacheinander mit einem Leerzeichen getrennt angegeben werden. Diese haben folgende Bedeutung.
- 1. Wert: Horizontaler Versatz
- 2. Wert: Vertikaler Versatz
- 3. Wert: Unschärfe-Radius
- 4. Wert: Farbe
Die Syntax ist nachfolgend mit einem Beispiel abgebildet.
Mehrere Schatten und negative Werte
Die Werte für den horizontalen und vertikalen Versatz können auch negativ sein. Außerdem ist es möglich, den Texten mehrere Schatten zuzuweisen. Das wird dadurch bewerkstelligt, indem man den nächsten Satz von Werten mit einem Komma getrennt eingibt. Nachfolgend ist ein Beispiel CSS-Code und die Abbildung der Darstellung im Browser.
.selektor {
text-shadow: 3px 3px 4px orange,
-20px 17px 4px blue,
-25px -25px 4px green;
}
Schatten ohne Versatz
Wenn man beim horizontalen und vertikalen Versatz als Wert 0 angibt, dann umgibt der Schatten den Text.
Bei einem horizontalen Versatz von 0 und einem negativen Wert für den vertikalen Versatz erhält man einen Schatteneffekt, bei dem der Text so erscheint, als wäre es eingraviert.