mozilla

text-shadow

Übersicht

Mit der text-shadow Eigenschaft kann man Schatteneffekte für den Text sowie für text-decoration festlegen. Mehrere Schatteneffekte können, durch Kommata getrennt, von oben nach unten festgelegt werden. Der erste Schatten liegt oben.

  • Standardwert none
  • Anwendbar auf Alle Elemente
  • Vererbt Ja
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert a color plus three absolute lengths
  • Animierbar Ja, als Schatten
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

text-shadow:  none | <shadow-t>#

<Schatten>: [<Farbe>? <X-Verschiebung> <Y-Verschiebung> <Unschärfe-Radius>?] | [<X-Verschiebung> <Y-Verschiebung> <Unschärfe-Radius>? <Farbe>?]

Werte

none
Standardwert. Es wird kein Textschatten erzeugt.
inherit
Der Wert des Elternelements wird geerbt.
<Schatten>
<Farbe>:
Die Angabe ist optional und steht entweder vor den Längenangaben oder danach. Wenn keine Farbangabe gemacht wurde, benutzt Gecko den Wert der color-Eigenschaft. Safari (Webkit) benötigt eine Farbangabe.

<X-Verschiebung> <Y-Verschiebung>:
Die Angabe ist erforderlich. Die <X-Verschiebung> verschiebt den Schatten auf horizontaler und die <Y-Verschiebung> auf vertikaler Ebene. Negative Werte sind auch möglich. Wenn beide Werte auf Null gesetzt sind, liegt der Schatten unter dem Text und kann nur beim Festlegen eines <Unschärfe-Radius> sichtbar werden. Mögliche Einheiten: Längen

<Unschärfe-Radius>:
Die Angabe ist optional und Null, wenn kein <Unschärfe-Radius> gesetzt wurde. Je großer der Wert, desto größer die Unschärfe. Der Schatten wird dadurch umso mehr ausgedehnt und schwacher. Mögliche Einheiten: Längen

Hinweis zu Gecko 2
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Ab Gecko 2 wird der Unschärfe-Radius aus Gründen der Performance auf 300 begrenzt. Außerdem braucht niemand solche großen Radien.

Beispiele

text-shadow: 2px 2px 2px #333;
text-decoration: underline; 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 10px 10px 2px red, 20px 20px 2px orange, 30px 30px 2px green;
font-size: 20px; 

Lorem ipsum

text-shadow: 10px 10px;

Schatten nur mit Verschiebung

Spezifikation

Spezifikation Status Anmerkung
CSS Transitions Working Draft text-shadow ist annimierbar
CSS Text-decoration Level 3 Candidate Recommendation  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 3.5 (1.9.1) 10 9.5 1.1 (100)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: fscholz, SJW
Zuletzt aktualisiert von: SJW,
Seitenleiste ausblenden