CSS3 Text Shadow - Text Schatten

CSS3 bietet die Möglichkeit, für Text einen Schatten-Effekte zu definieren. Firefox, Opera, Google Chrome und Safari unterstützen das bereits. Der Designfeind IE natürlich nicht. Text Schatten werden nicht vererbt und können auf alle Elemente angewedet werden.

Eigenschaften für text-shadow

Text-shadow ist genau betrachtet eine Kopie des Textes.
Text-shadow hat vier parameter, wobei negative Werte erlaubt sind.

  1. X-Verschiebung - horizontale Verschiebung
  2. Y-Verschiebung - vertikale Verschiebung
  3. Blur - Weichzeichnung-Effekt
  4. Farbe - Farbwert des Schattens
 .shadow { text-shadow: 1px 1px 0px #777; }

Beispiele für text-shadow

1 Welches ist das Orginal?

Text-shadow ist eine Kopie des Textes. In diesem Beispiel wurde nur die horizontale Verschiebung verändert.

.copy {text-shadow: 240px 0px 0px #3F3132;}

2 Titel mit einfachem feinem Schatten

.shadow {text-shadow: 2px 1px 0px #ccc;}

Text Schatten mehrmals anwenden

Text Schatten können kombiniert werden. Mehrere Textschatten können gleichzeitg, Kommagetrennt nacheinender angeortnet werden.

3 Titel mit 2 Schatten stark weichgezeichnet

.shadowblur {
text-shadow: 1px 1px 19px #000,
2px 1px 0px #ccc;
}

4 Titel mit doppel Schatten und Weichzeichnungs-Effek

.shini { text-shadow: 0px 0px 15px #00FFFF, -1px -1px 0 #000;}

In diesem Beispiel werden zwei Text Schatten eingesetzt. Zuerst wird in der Schriftfarbe ein Weichzeichnungseffekt ohne Versatz eingesetzt. Der zweite Schatten ist eine feine kontur in schwarz.

Schatten Spielereien

Cloude-Effekt mit vielen Schatten

.multishadows { 
text-shadow: 40px 20px 1px #555, 
30px -20px 1px #ff6677, 
20px 30px 5px #000, 
0 0 20px #ff6677,  
1px 1px  2px #999; 
}
}

Text Schatten können belieblig oft eingesetzt werden.

Text Schatten generieren

Der Text-Shadow-Generator visualsiert diese darstellung perfekt und schreibt zudem gleich den CSS-Code.