The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. text-shadow

CSS 2.1 · Eigenschaft

CSS-Eigenschaft text-shadow

Vollreferenz zu text-shadow: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.

Erstveröffentlichung Lesezeit 3 min
stylesheet.css · text-shadow
.probe {
  text-shadow: 2px 2px 0 #C9A9F0;
}
Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.
berechneter Werttext-shadow: 2px 2px 0 #C9A9F0
Box-Breite–
Box-Höhe–

Erläuterungen

Diese Eigenschaft erlaubt die Beschreibung eines Schatteneffekts am Text. text-shadow wurde bisher durch kein Anwenderprogramm implementiert und in CSS 2.1 wieder entfernt. Die Eigenschaft ist erst für CSS 3 wieder eingeplant.

Es lassen sich mehrere Schatteneffekte für dasselbe Element kombinieren. text-shadow kann auch gemeinsam mit den Pseudoelementen :first-letter und :first-line verwendet werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'text-shadow'
none |   [ <color> || <length> <length> <length>? ,]* [ <color> || <length> <length> <length>? ]   | 
inherit
none (Ausgangswert)
Kein Schatteneffekt
<color>
  • Farbwert als Hexadezimalangabe (#rrggbb)
  • Farbwert als Hexadezimalkurzangabe (#rgb)
  • Prozentangaben (rrr.r%,ggg.g%,bbb.b%)
  • direkte RGB-Werte (rrr,ggg,bbb)
  • Farbnamen (Hier sind nur die 17 Farben
     maroon ,  red ,  orange ,  yellow ,  olive ,
     purple ,  fuchsia ,  white ,  lime ,  green ,
     navy ,  blue ,  aqua , teal ,
     black ,  silver ,  gray 
    sowie die Systemfarben im Standard definiert. Fast alle dieser Farben werden von den heute gängigen Browsern mit den korrekten RGB-Werten dargestellt. Dasselbe gilt auch für die meisten der bereits 1996 eingeführten X11-Farbnamen – die jedoch nicht standard- konform sind. Deshalb ist es empfehlenswert, stets die RGB- oder Hexadezimalangaben zu verwenden, um eine konsistente Farbdarstellung zwischen den verschiedenen Browsern zu erreichen.
Mehr Informationen über Farben in CSS finden Sie im Grundlagenartikel Farbwerte.
<length> <length>
Versatz des Schattens in x- und y-Richtung. Erlaubt sind absolute und relative Längenangaben, auch negative Werte sind zulässig. Diese beiden Angaben müssen vorhanden sein.
<length>
Unschärferadius zwischen hell und dunkel (=blur radius). Diese Angabe kann weggelassen werden.
Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiele

Die folgenden drei Beispiele werden dann möglich, wenn Browser diese Eigenschaft einmal unterstützen. Die Grafik darunter zeigt, wie es aussehen sollte/könnte.

Beispiel 1 zeigt einen Text, der mit einem einfachen Schatten versehen wurde. Der Schatten ist jeweils 5 Pixel nach unten und rechts versetzt. 3 Pixel Unschärferadius geben ihm ein etwas mehr realistisches Aussehen.

H2 { color: #000; background: #fff;
   text-shadow: #ccc 5px 5px 3px }  /* Text mit Schatten */

Beispiel 2 zeigt eine helle Schrift, die zur Kontrastverstärkung mit einem weiträumig verlaufenden dunkleren Hintergrund versehen wurde.

H2 { color: #fff; background: #fff8dd;
   text-shadow: #fc0 0 0 50px; }    /* Dunkler Hintergrund */

Beispiel 3 veranschaulicht die Kombination von zwei Schattenwirkungen zur Simulation eines Neoneffektes: um den hellen Neon-Schriftzug erscheint das abgestrahlte Licht zuerst in einem rötlicheren, dann in einem dunkleren, mehr blauen Farbton.

H2 { color: #eeddff; background: #000;
   text-shadow: #ccb1ff 0 0 25px
                #8b4dff 0 0 25px; }  /* neon @ night */

Illustration zu den vorgenannten Beispielen.

Browserunterstützung

Alle Browser:
Die Eigenschaft text-shadow wird bis heute von keinem Browser
erkannt, mit folgenden Ausnahmen:
Safari 1.3
Der Apple-Browser stellt diese Eigenschaft richtig dar, nur mehrfache Textschatten (siehe Beispiel 'neon @ night') unterstützt er bisher nicht.
Konqueror 3.5
Auch der Konqueror stellt diese Eigenschaft richtig dar, solange es nur um einfache Schattenwirkungen geht.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

(Keine.)

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert
none
Berechneter Wert
Nicht definiert
Vererbung
Nein
Anwendbarkeit
Auf alle Elemente
%-Bezugswert
Nicht zutreffend
Mediengruppe(n)
Visual

Ausblick

Das neue CSS-3-Modul Text enthält einige erweiterte Möglichkeiten der Textgestaltung und -formatierung, konzentriert sich dabei im Wesentlichen auf die fernöstlichen mehrdirektionellen Textarten.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 1 Errata, CSS 2.