Ihre Suchergebnisse

    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

    Mitwirkende an dieser Seite: fscholz
    Zuletzt aktualisiert von: fscholz,
    Seitenleiste ausblenden