Galerie

6 praktische Tipps zur Webtechnik - CSS3-Attribut text-shadow: Ohne großen Aufwand überzeugen diese Schatteneffekte.

CSS3-Attribut text-shadow: Ohne großen Aufwand überzeugen diese Schatteneffekte.

Tipp 2: Eigenschaft text-shadow
So können Sie für die Anzeige in Mozilla Firefox Textschatten erzeugen.

Das Attribut text-shadow hat seine eigene Geschichte. Mit CSS2 eingeführt, wurde es in CSS 2.1 aus dem Standard herausgenommen - der Grund war mangelnde Browser-Unterstützung - und in CSS3 ist es wieder dabei. Immerhin wird dieses Attribut mittlerweile von den Browsern Safari, Opera, Google Chrome und Mozilla Firefox ab Version 3.5 korrekt unterstützt. Sie erzeugen damit auf einfache Weise Textschattierungen in verschiedenen Variationen.

Der erste Wert definiert die horizontale und der zweite die vertikale Position des Schattens, jeweils im Verhältnis zum Originaltext. Mit dem dritten Wert legen Sie den Unschärferadius fest. Zuletzt geben Sie die Schattenfarbe an, entweder als RGB-Wert oder als Farbkonstante. Die beiden letzten Parameter sind optional. Einen Wert ungleich Null für den Unschärferadius sollten Sie aber in den meisten Fällen angeben, da dieser den eigentlichen Schatteneffekt ausmacht, z.B. text-shadow: 3px 3px 7px gray;.

Besonders beeindruckende Effekte erzielen Sie, indem Sie gleich mehrere Textschatten miteinander kombinieren. Dazu notieren Sie für das text-shadow-Attribut einen zweiten Satz an Werten, den Sie - durch ein Komma getrennt - an den ersten anhängen. Das folgende Beispiel definiert, passend zur Schriftfarbe, zwei Schatten in abgestuften Blautönen: text-shadow: 2px 2px 3px #00DEFF, 4px 4px 3px #0080FF;.