Web Style Sheets
CSS Tips & Tricks

Text mit Schatten

CSS3 bietet eine Eigenschaft 'text-shadow' um einem Buchstaben einen Schattenwurf zuzuweisen. In seiner einfachsten Form sieht es so aus:

h3 {text-shadow: 0.1em 0.1em #333}

Hier wurde ein dunkelgrauer (#333) Schatten ein wenig nach rechts (0.1em) und unten (0.1em) - relativ zum Text - geworfen. Das Resultat sieht so aus:

(Bis August 2005 unterstützen noch nicht alle Browser 'text-shadow'. Das hier Gezeigte sollte zumindest mit dem Safari und Konqueror funktionieren.)

Unscharfer Textschatten

Die einfachste Form von 'text-shadow' besitzt zwei Eigenschaften: eine Farbe (wie im obigen Beispiel #333) und eine Einrückung (Offset) (0.1em 0.1em im obigen Beispiel). Das Ergebnis ist ein scharfer Schatten mit dem angegebenen Offset. Aber der Offset kann auch unscharf eingestellt werden zur Erzeugung eines verwaschenen Schattens.

Der Wert der Unschärfe wird durch einen weiteren Offsetwert angegeben. Hier folgen zwei Zeilen, eine mit einer geringen Unschärfe (0.05em) und eine mit einer stärkeren Einstellung (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Lesbarer weisser Text

Wenn der Kontrast der Vordergrund - und Hintergrundfarbe gering ist kann ein Schatten einem Text eine bessere Lesbarkeit verleihen. Hier ein Beispiel von weissem Text auf einem hellen blauen Hintergrund. Einmal ohne - und einmal mit Schatten:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Mehrfach Schatten

Sie können auch mehr als nur einen Schatten verwenden. In der Realität sieht das aber schon ganz schön seltsam aus:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Aber mit einem wohl platzierten dunklen und einem hellen Schatten kann das Ergebnis ganz brauchbar ausfallen:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Das ganze ist etwas gefährlich wenn Ihr Browser keine 'text-shadow' Eigenschaft kennt. Speziell hier sind Text - und Hintergrundfarben beinahe identisch (#CCCCCC und #D1D1D1), so dass Sie ohne Schatten kaum etwas erkennen können.

Konturen

Das zwei-Schatten Beispiel kann man noch etwas weiterführen. Mit vier Schatten kann den Buchstaben des Textes eine nette Umrandung zugewiesen werden:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Gut, das ist keine perfekte Umrandung und zum aktuellen Zeitpunkt (August 2005) wird noch darüber diskutiert ob CSS eine separate Eigenschaft (oder einen Extra Paramater für 'text-decoration') besitzen sollte um bessere Umrandungen zu erzeugen.

Neon Glühen

Wenn Sie einen unscharfen Schatten hinten einen Text legen, also mit einem Offset Wert von 0, dann wir ein Effekt in der Art einer Neon Lampe produziert. Wenn Ihnen das Glühen eines einzelnen Schattens nicht genügt können Sie diese Prozedur beliebig oft wiederholen:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}