Textschatten

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen Schlagschatten für Text mit der CSS3-text-shadow-Eigenschaft (Cascading Style Sheets, Level 3).

text-shadow-Eigenschaft

Die text-shadow-Eigenschaft wendet einen Schlagschatteneffekt auf den angegebenen Text an und ist im Modul CSS-Textverzierung, Level 3 des World Wide Web Consortium (W3C) definiert. Falls Sie mit der Syntax für die box-shadow-Eigenschaft vertraut sind, kennen Sie die Syntax für text-shadow bereits; die beiden Eigenschaften sind fast identisch.

EigenschaftBeschreibung

text-shadow

Eine durch Komma getrennte Liste von Schatten, mit der dem angegebenen Text einer oder mehrere Schatten zugeordnet werden. Jeder Schatten besteht aus einer durch Leerzeichen getrennten Liste mit folgenden Elementen

  • horizontal offset  Erforderlich. Bei einem positiven Wert wird ein Schatten nach rechts vom Text versetzt gezeichnet, bei einem negativen Wert nach links versetzt.
  • vertical offset  Erforderlich. Bei einem positiven Wert wird ein Schatten nach unten vom Text versetzt gezeichnet, bei einem negativen Wert nach oben versetzt.
  • blur distance  Negative Werte sind nicht zulässig. Wenn der Weichzeichnungswert null ist, hat der Schatten eine scharfe Kante. Andernfalls wird der Rand umso stärker weichgezeichnet, je größer der Wert ist.
  • spread distance  Positive Werte führen dazu, dass der Schatten in alle Richtungen mit dem angegebenen Radius erweitert wird. Bei negativen Werten wird der Schatten zusammengezogen. (Achten Sie darauf, dass dieser Wert möglicherweise nicht von allen Browsern unterstützt wird.)
  • color  Alle unterstützten CSS-Farbwerte.

 

Die Syntax für die text-shadow-Eigenschaft ist die gleiche wie für die box-shadow-Eigenschaft mit der Ausnahme, dass die text-shadow-Eigenschaft das inset-Schlüsselwort nicht unterstützt.

Das folgende Beispiel wendet einen dunkelgrauen Schatten mit einem geringen Weichzeichnerwert etwas rechts und unterhalb des angegebenen Textes an:


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

Folgendes geschieht, wenn die Auswahl auf einen kurzen Textblock angewendet wird:

Der Text "Internet Explorer 10" erhält einen grauen Textschatten.

Das W3C hat eine Seite mit text-shadow-Tipps und -Beispielen: CSS-Textschatten.

API-Referenz

text-shadow

Beispiele und Lernprogramme

Beispiel für die CSS-Eigenschaft "text-shadow"
So wird's gemacht: Hinzufügen spielerischer Texteffekte mithilfe von CSS

Demos für die Internet Explorer-Testversion

So geht's: text-shadow

IEBlog-Beiträge

Einsatz standardbasierter Webgrafiken in IE10
Die CSS3-Eigenschaft "text-shadow" in IE10

Spezifikation

Modul CSS-Textverzierung, Level 3: Abschnitt 4

Verwandte Themen

Hintergründe und Rahmen
Beherrschen von CSS3: 7 tolle Beispiele für Textschatten, die Sie keineswegs verpassen sollten
Beherrschen von CSS3: Textschatten

 

 

Anzeigen:
© 2014 Microsoft