Mit der CSS-Eigenschaft „text-shadow“ kann man sehr reizvolle Akzente setzen, wenn man den Effekt sparsam und gezielt einsetzt. In diesem Artikel stelle ich fünf Beispiele dazu vor.
Der Code ist relativ einfach aufgebaut:
[css]text-shadow: 1px 2px 3px #999[/css]
Der erste Wert bezeichnet den horizontalen Versatz, der zweite Wert gibt den vertikalen Versatz an. Man kann mit positiven und negativen Werten arbeiten.
Der dritte Wert bestimmt den Grad der Weichzeichnung. Je höher dieser Wert ist, desto weicher und breiter ist die Kante des Schattens. Der vierte Wert ist die Farbe des Schattens.
Mit den CSS-Angaben würde ein Text so aussehen:
» HINWEIS
Die Beispiele in diesem Artikel sind in reinem CSS-Code (ohne Bilder) umgesetzt. Besucher, die mit dem Internet-Explorer vorbeischauen, sehen – nicht allzu viel.
Wäre das nicht ein Anlass, Firefox auszuprobieren? ;o)
1. Dunkle Navigationsleiste
Mit einem leichten Schatten versehen hebt sich der helle Text besser von der dunklen Hintergrundfläche ab.
[css]
text-shadow: 0 1px 1px #ccc;
[/css]
2. Text auf grauem Hintergrund
Ein ähnlicher Effekt mit umgekehrten Vorzeichen: Mit einem Schatten kann man einen (dunklen) Text auf einer grauen Fläche prägnanter aussehen lassen. Auf Hintergründen, die eine leichte Textur haben, wirkt das besonders gut.
[css]text-shadow: 0px 1px 0px #e7e7e8; [/css]
3. Prägung
Dieser Effekt sieht auf dunklen Flächen und bei relativ großen Schriftgrößen sehr elegant aus.
[css]
color:#222;
text-shadow: 0px 2px 3px #666;
[/css]
4. Doppelbild
Hier arbeitet man zusätzlich mit einem Transparenz-Effekt. Dadurch wird das Ganze optisch reizvoll.
[css]
color: rgba(0, 168, 255, 0.5);
text-shadow: 4px 4px 0 rgba(255, 0, 180, 0.5);
[/css]
5. Retro-Effekt
Dieser Trick gefällt mir immer wieder gut, ich hoffe, dass ich ihn irgendwann einmal einsetzen kann. Weil der Internet-Explorer (s.u.) Text-Schatten nicht darstellen kann, müsste man in diesem Fall aber eine Fallback-Lösung per Grafik einbauen.
Man arbeitet hier gleich mit zwei Schatten. Der erste Schatten (weiß) ist identisch mit der Hintergrundfarbe und erzeugt die weiße Lücke. Der zweite Schatten (grau) ist der eigentliche Schlagschatten.
[css]
text-shadow: 3px 3px 0px #fff, 8px 8px 0px #ccc;
[/css]
Browserkompatibilität
Bis auf den Internet-Explorer und inzwischen veraltete Browser (z.B. Firefox 3.1.) unterstützen alle modernen Browser die CSS-Eigenschaft text-shadow. Der IE fällt als einziger aus dem Rahmen. Es gibt zwar einige Hacks und Workarounds um Text-Schatten auch im IE zu realisieren, aber so richtig überzeugt mich keine Lösung. Ganz abgesehen vom Mehraufwand, ist das Ergebnis (d.h. die Darstellung im Browser) oft nicht sehr überzeugend.
Tipps
Textschatten sollte man sparsam dosieren. Zuviel davon sieht schnell unprofessionell aus. Bei allen Schatten-Effekten sollte man darauf achten, dass das Design auch dann noch funktioniert, wenn der Schatten nicht dargestellt wird. Ein Text sollte in jedem Fall gut lesbar sein, mit und ohne Schatten. Eine weiße Schrift mit dunklem Schatten auf weißem Hintergrund ist keine so gute Idee. Auch Experimente wie der Doppelbild-Effekt sind mit Vorsicht zu genießen.