Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: text-shadow, Kategorien: Textdarstellung (allgemein), Text Decoration (CSS 3)

Textschatten

Steuert die horizontale und vertikale Richtung, Unschärfe und Farbe eines Textschattens.

CSS-Eigenschaft: text-shadow
KurzbeschreibungWerteStandardwertKategorieHinweis
Textschatten
  • <length>
  • <color>
  • none
none
Allgemein:
Textdarstellung
CSS 3:
Text Decoration
Neu in CSS 3
 

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.
Browserunterstützung von text-shadow
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu text-shadow:



Beispiele

HTML:

<h1 id="example-1">text-shadow</h1>

CSS:

#example-1 {
   text-shadow: #999 10px 10px;
}
/* Standardangabe */
Beispiel nur für: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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: FirefoxGoogle ChromeInternet Explorer
W3C: 10
OperaSafari

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.653 sec.

Browser-Marktanteile