CSS3 im Detail: Text-Shadow

von

Teil 8 der CSS3 im Detail – Reihe, diesmal geht’s um Text-Shadow.

Wie der Name schon vermuten lässt, wird es möglich sein, bzw. ist es schon möglich, beliebigen Text einen Schatten zu verleihen. Das hat natürlich hauptsächlich ästhetische Vorzüge, kann aber unter Umständen sogar die Lesbarkeit verbessern oder zumindest dem Benutzer helfen, bestimmte Texte eher wahrzunehmen. Text-Shadow ist keinesfalls mehr eine Technik von morgen, im Gegenteil, schon heute trifft man (meist unbewusst) schattierten Text auf vielen Webseiten an.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Firefox Safari Opera Chrome Internet Explorer
(IE ab Version 10)

Syntax

Text-Shadow ist ganz simpel und kommt sogar schon ohne browserspezifische Präfixe aus. D.h. alle oben genannten Browser unterstützen text-shadow in seiner finalen Form.

1
2
3
div.textshadow {
	text-shadow:10px 10px 3px #666;
}

Wie wir sehen können, hat text-shadow vier Parameter:

  1. X-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der X-Achse verschoben wird (nach links/rechts versetzt). Negative Werte sind erlaubt.
  2. Y-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der Y-Achse verschoben wird (nach unten/oben versetzt). Negative Werte sind erlaubt.
  3. Größe: Ein weiterer Längenwert, der angibt, wie weit sich der Schatten ausbreiten soll. Ein Wert von 0 erzeugt einen sehr harten Schatten, je höher der Wert, desto unschärfer wird er.
  4. Farbe: Hier kann man jeden in CSS erlaubten Farbwert einsetzen (auch RGBa!).

Obiger Code erzeugt dieses Bild:

Text mit Schatten

Man kann das Ganze aber auch noch weiter treiben und mehrere Schatten erzeugen. Dazu werden hinter dem ersten Schatten einfach noch weitere deklariert und mit Komma voneinander getrennt.

1
2
3
div.moreshadows {
	text-shadow:10px 10px 0 #aaa,-10px -10px 3px #f00,0 0 10px #00f;
}
Verrückter Text

Ihr seht, damit kann man auch ne ganze Menge dummes Zeug fabrizieren aber dazu ist Text-Shadow nicht gedacht. Hier mal ein paar schöne Beispiele, wie man Text-Shadow richtig einsetzen kann.

a) Gravur-Effekt 1

Dezent hervorgehobener Text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

b) Gravur-Effekt 2

Überschrift

c) Schlagschatten

Pulp Fiction

Fazit

Schaut euch eure Lieblingsseiten im Internet mal genauer an. Ich wette, da gibt es einige, die bereits Text-Shadow verwenden. Auch ich nutze es auf diesem Blog. Der Text in der Sidebar hat einen diffusen Schatten, damit er leichter auf dem dunklen Hintergrund zu lesen ist, die Artikelüberschriften haben einen schwachen Schlagschatten und die Ähnliche Artikel-Box benutzt den Gravur-Effekt 1. Text Shadow ist für mich ein nützliches Werkzeug geworden um Text besser und schöner hervorzuheben. Weitere Pluspunkte sammelt Text-Shadow mit der breiten Unterstützung an der Browser-Front und der schlanken Syntax. Viel Spaß! :)

Die hier könnten dich auch interessieren…

2 Kommentare RSS

Olli

Hallo Norman,

Danke für deine Einführung in CSS3. Konnte vieles für mich mitnehmen. Insbesondere Border-Radius und Background-Gradient finde ich sehr interessant.

Gruß Olli

IE-Text Shadow

Für den Internet Explorer in den alten Versionen kann man die Eigenschaft Filter verwenden um Texte und GIF-Grafiken einen Schatten zu spenden.

Anwendungsbeispiel:
filter:DropShadow(color=#C0C0C0, offx=3, offy=3)

Grauer Schatten 3 Pixel nach links und 3 Pixel nach unten.

Quelle: http://de.selfhtml.org/css/eigenschaften/filter.htm

Kommentieren