CSS-Eigenschaft: text-shadow, Kategorien: Textdarstellung (allgemein), Text Decoration (CSS 3)
Textschatten
Steuert die horizontale und vertikale Richtung, Unschärfe und Farbe eines Textschattens.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Textschatten |
| none |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text Decoration (CSS 3):
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- overflow-style
- overflow-wrap
- tab-size
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- Aktuelle Seite: text-shadow
- text-transform
- text-underline-position
- white-space
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von text-shadow zu beachten:
- text-shadow erzeugt einen Schlagschatten. Ist auf alle Elemente anwendbar, die Text haben können.
- Erwartet 2 oder 3 Werte in absoluter oder relativer Angabe von PX, EM usw. (%-Angaben werden nicht unterstützt) sowie eine Farbangabe.
Die einzelnen Parameter haben folgende Auswirkung:
- Die erste Längenangabe steuert die horizontale Schattenrichtung. Positive Werte erzeugen einen Schatten nach rechts, negative nach links. Ohne einen zweiten Wert für die vertikale Richtung ist eine einzelne Längenangabe wirkungslos.
- Die zweite Längenangabe steuert die vertikale Schattenrichtung. Positive Werte erzeugen einen Schatten nach unten, negative nach oben.
- Die dritte Längenangabe bestimmt den Radius der Unschärfe und führt zu einem Schatten ohne scharfe Kanten.
- Der Farbwert steuert die Farbe des Schattens.
- Der Internet Explorer unterstützt text-shadow nicht, Opera ab der Version 9.6, Firefox ab Version 3.5, Safari und Chrome jeweils vollständig ab Version 4.
- Der Schatten wirkt sich nicht nur auf Text aus, sondern auch auf eine text-decoration, falls diese definiert ist (Siehe Beispiel Nr. 7). Der Schatten greift jedoch beispielsweise nicht auf den Rahmen eines HTML-Elements.
- Die Reihenfolge ist beliebig. Allerdings kommt es zu keiner Darstellung, wenn der Farbwert zwischen den Längenangaben steht.
- Es können mehrere Schatten in einer Regel definiert werden, die einzelnen Blöcke der Schattenangaben werden durch Kommas voneinander getrennt (Siehe Beispiel Nr. 8). Die Schattendarstellung findet von vorne nach hinten statt. Generell liegt der Schatten hinter dem Text, ein zweiter Schatten liegt hinter dem ersten, usw.
- box-shadow hat einen vierten optionalen Längen-Parameter, der eine Vergrößerung bzw. Verkleinerung des Schattens bewirkt. Dieser Möglichkeit bietet text-shadow nicht.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu text-shadow:
- W3C Spezifikation:
http://www.w3.org/TR/css-text-decor-3/#text-shadow
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
text-overflow - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
text-space-collapse
Beispiele
HTML:
<h1 id="example-1">text-shadow</h1>CSS:
#example-1 {
text-shadow: #999 10px 10px;
}
/* Standardangabe */Beispiel nur für: 
W3C: 10
Beispiel Nr. 1 So sieht's aus:
text-shadow
HTML:
<h1 id="example-2">text-shadow</h1>CSS:
#example-2 {
text-shadow: 0.6em 0.4em #00f000;
}
/* EM-Werte sind genauso möglich wie PX-Werte.
Die Farbangabe kann vor oder hinter den Längenangaben stehen. Steht sie dazwischen, ist die Regel fehlerhaft und es kommt zu keinem Schatten. */Beispiel nur für:
W3C: 10
Beispiel Nr. 2 So sieht's aus:
text-shadow
HTML:
<h1 id="example-3">text-shadow</h1>CSS:
#example-3 {
text-shadow: 20px 20px 5px #900;
}
/* Die dritte Längenangabe steuert die Unschärfe des Schattens. */Beispiel nur für:
W3C: 10
Beispiel Nr. 3 So sieht's aus:
text-shadow
HTML:
<h1 id="example-4">text-shadow</h1>CSS:
#example-4 {
text-shadow: 50px 20px 30px #000099;
}Beispiel nur für:
W3C: 10
Beispiel Nr. 4 So sieht's aus:
text-shadow
HTML:
<h1 id="example-5">text-shadow</h1>CSS:
#example-5 {
text-shadow: -30px -15px #990099;
}
/* Negative Werten steuern den Schatten nach links bzw. oben. */Beispiel nur für:
W3C: 10
Beispiel Nr. 5 So sieht's aus:
text-shadow
HTML:
<h1 id="example-6">text-shadow</h1>CSS:
#example-6 {
text-shadow: #309 -5px 5px 5px;
}
/* Ein anderes Beispiel für einen Schatten nach links unten. */Beispiel nur für:
W3C: 10
Beispiel Nr. 6 So sieht's aus:
text-shadow
HTML:
<h1 id="example-7">text-shadow</h1>CSS:
#example-7 {
text-decoration: underline;
text-shadow: darkblue 30px 30px;
}
/* Der Schatten übernimmt auch die text-decoration. */Beispiel nur für:
W3C: 10
Beispiel Nr. 7 So sieht's aus:
text-shadow
HTML:
<h1 id="example-8">text-shadow</h1>CSS:
#example-8 {
text-shadow: red 0px 5px, blue 0px 10px, green 0px 15px;
}
/* Hier die Angabe mehrerer Schatten. Die Blöcke werden durch ein Komma getrennt.
Die Schatten werden von vorne nach hinten generiert, d.h., der letzte liegt ganz unten. */Beispiel nur für:
W3C: 10
Beispiel Nr. 8 So sieht's aus:
text-shadow
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!