Textschatten im Webdesign

Das Ziel der CSS Eigenschaft für Textschatten ist es, Webdesignern und CSS-Programmierern ein Werkzeug in die Hand zu legen, mit dem Text-Effekte (ohne die Darstellung von Bildern oder Grafiken) erzeugt und in Webseiten eingebunden werden können. Die CSS3-Eigenschaft text-shadow lässt eine Vielzahl an Möglichkeiten zu kreativ mit dem Code zu agieren.

Mit dem Spiel von Farben, Versatz (Offset) und Unschärfe (Blur) lassen sich ziemlich geniale und coole Texteffekte für Webseiten erzeugen. Text-Effekte, die häufig durch Grafik- und Layout-Programme, wie Photoshop erstellt werden, haben nämlich einen großen Nachteil für Webseiten: ein einziges Bild ist oftmals größer als der CSS-Code, der für das gesamte Design und Layout der Website verwendet wird.
Diese Tatsache wirkt sich negativ auf die Ladezeit der Webseite und damit auf mögliches Spitzenranking in den gängigen Suchmaschinen.

Was in Photoshop beispielsweise durch Ebenenstile wie Schlagschatten, Schein nach außen und Kontur möglich ist, wird durch die Textschatten-Eigenschaft in CSS3 für Webdesigner ermöglicht.

CSS Textschatten

Die text-shadow-Eigenschaft wurde bereits in CSS 2.0 eingeführt. Jedoch wurde diese CSS-Eigenschaft von keinem Browser implementiert. In CSS 2.1 wurde die Textschatten-Eigenschaft entfernt und erst wieder in CSS3 in Kraft gesetzt. Daraufhin fingen einige Browser mit der Umsetzung der Text-Schatten-Eigenschaft an.

Die Browser-Umsetzung der Textschatten-Eigenschaft wurde leider nicht, wie erhofft, von allen Browsern übernommen.

Browserkompatibilität

Derzeit wird die CSS-Textschatten-Eigenschaft von folgenden Browser unterstützt:

  • Opera
  • Chrome
  • Safari
  • Mozilla
  • Konqueror
  • iCab

Hier zeigt sich der Internet Explorer mal wieder als bekannte Spaßbremse und unterstützt den CSS Textschatten in keiner seiner Versionen. Aber es ist auch möglich einige Teile der Textschatten-Eigenschaft durch Tricks in den Internet Explorer zu emulieren.

Beispielsweise kann man in älteren Internet-Explorer-Versionen einen ähnlichen Effekt erreichen, indem auf die Filter-Klasse filter:DropShadow() zurückgegriffen wird. Die Ergebnisse hierfür sind jedoch eher unbrauchbar → Textschatten im Internet Explorer.

Wie man CSS3 text-shadow benutzt

Nun zeigen wir hier an einfachen Beispielen, wie die Textschatten-Eigenschaften für die aktzeptierten Browser verwendet werden können. Die CSS-Eigenschaft für Textschatten wird mit den üblichen CSS-Eigenschaften für das grundlegende Aussehen gestylt.

Im CSS sollte die grundlegende Syntax wie folgt aussehen:

  1. Der erste Wert bestimmt den horizontalen Abstand (X-Versatz) des Schattens. Ein positiver Wert für den X-Versatz schiebt den Schatten nach rechts, ein negativer Wert nach links.
  2. Der zweite Wert definiert den vertikalen Abstand (Y-Versatz) des Schattens. Ein positiver Wert für den Y-Versatz positioniert den Schatten unter dem Text, ein negativer Wert über dem Text.
  3. Der dritte Wert beschreibt den Radius der Weichzeichnung. Je höher der Radius für den Schatten bestimmt wird, desto weicher wird dieser dargestellt.
    Der letzte Wert bestimmt die Schattenfarbe.
  4. Mit dem vierten Wert wird die zu verwendende Farbe angegeben.
Beachte:
Die Angaben für den Textschatten eines Elements werden ohne dein Zutun an die Kindelemente vererbt.

12 Beispiele für den CSS3-Einsatz von Textschatten

Im Folgendem bilden wir 12 Beispiele für den Einsatz der CSS-Textschatten-Eigenschaft ab. Frei nach dem Motto “No Idea Limit” sind dem kreativen Designer kaum Grenzen gesetzt um mit der flexiblen Textschatten-Eigenschaft Texte zu dekorieren.

Beispiel 1: Einfacher Textschatten

der weissraum

Beispiel 2: Volltonschatten

der weissraum

Beispiel 3: Stapelschatten

der weissraum

Beispiel 4: Textschatten Smooth

der weissraum

Beispiel 5: Text-Schatten als Kontur

Die CSS3-Eigenschaft text-shadow lässt sich auch für die Kontur-Darstellung verwenden.

der weissraum

Beispiel 6: Buchdruck Prägung

der weissraum

Beispiel 7: Buchdruck Erhaben

der weissraum

Beispiel 8: Glow-Effekt

der weissraum

Beispiel 9: Text-Schatten Neon

der weissraum

Beispiel 10: Anaglyphen

der weissraum

Beispiel 11: Retro und Vintage

Der Retro und Vintage Look sind im Trend. Retro und Vintage-Elemente finden große Beliebtheit im Designkontext. Online-Shops, Portfolios und Blogs integrieren diesen Stil.

der weissraum

Beispiel 12: Text-Schatten Feuer

Durch mehrfach eingesetzte Textschatten ergeben sich je nach Idee und kreativen Ergüssen eine Vielzahl an Darstellungsmöglichkeiten. So steht es dem Designer natürlich auch frei die Textschatten-Eigenschaft für Eigenes zweck zu entfremden. Wie beispielsweise für das Visualisieren von Feuer.

der weissraum