So wird's gemacht: Hinzufügen spielerischer Texteffekte mithilfe von CSS

Internet Explorer 10 bietet mit der Cascading Stylesheet (CSS)-Eigenschaft text-shadow neue Unterstützung für hardwarebeschleunigte Textschatten. Die Unterstützung der text-shadow-Eigenschaft war eines der meist gewünschten Features von Webentwicklern. Sie ermöglicht Texteffekte, die bisher ohne Ausweichen auf Text in Form von Inlinebildern schwer oder gar nicht zu erreichen waren.

CSS-Textschatten sind im Abschnitt 10.3 der World Wide Web Consortium (W3C)-Spezifikation für CSS-Text, Level 3, definiert. Neben Webseiten in Internet Explorer 10 unterstützen auch Windows Store-Apps mit JavaScript die text-shadow-Eigenschaft. In diesem Thema werden die Grundlagen der Implementierung von Textschatten erläutert, und anschließend werden die spielerischen Texteffekte vorgestellt, die text-shadow ermöglicht.

Dieses Thema enthält die folgenden Abschnitte:

Syntax der text-shadow-Eigenschaft

Mit Textschatten können Sie die Aufmerksamkeit auf Text lenken und ihm einen Tiefeneffekt verleihen. Verwenden Sie text-shadow, um Kontrast hinzuzufügen und die Lesbarkeit von Text vor einem Bild oder farbigen Hintergrund zu verbessern. Da Internet Explorer 10 und die meisten gängigen Browser den text-shadow-Standard unterstützen, ist kein browserspezifisches Präfix (z. B. "-ms-", "-webkit", "-moz-" usw.) erforderlich. Websites, für die text-shadowbereits verwendet wird, funktionieren daher automatisch in Internet Explorer 10.

Die text-shadow-Eigenschaft wendet einen Schlagschatteneffekt auf den angegebenen Text an und ist einfach zu implementieren. Wenn Sie schon mit der box-shadow-Eigenschaft gearbeitet haben, ist Ihnen die Syntax der text-shadow-Eigenschaft bereits vertraut – sie ist nahezu identisch.

EigenschaftBeschreibung

text-shadow

Mindestens eine durch Leerzeichen getrennte Liste mit Schattenparametern, wie hier angegeben. Werden mehrere Schatten angegeben, werden die Parameterlisten durch Komma voneinander getrennt.

  • 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 um den angegebenen Radius ausgedehnt wird. Bei negativen Werten wird der Schatten zusammengezogen. (Bedenken Sie, 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 mit der der box-shadow-Eigenschaft identisch, die einzige Ausnahme besteht darin, dass text-shadow das "inset"-Schlüsselwort nicht unterstützt.

Im Folgenden sehen Sie ein einfaches Beispiel für die text-shadow-Eigenschaft. Der folgende Ausschnitt wendet einen dunkelgrauen Schatten mit einem geringen Weichzeichnungswert etwas rechts und unterhalb des Textes an:


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

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

Screenshot des Textes "Internet Explorer 10" in Lindgrün mit einem grauen Schatten

Angeben von Eigenschaftswerten

Sie müssen mindestens zwei Werte für die text-shadow-Eigenschaft angeben – diex- und y-Offsets.


.shadow1 { 
  color: black; 
  text-shadow: 2px 2px; 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text mit einem einfachen schwarzen Schatten unter dem Text

Normalerweise möchten Sie eine Farbe für den Schatten angeben. Im folgenden Beispiel gibt "black" die Farbe des Textes selbst an, während "#87CEEB" die hexadezimale Darstellung der Schattenfarbe ist, einer hellen Blauschattierung.


.shadow2 { 
  color: black; 
  text-shadow: #87CEEB 1px 3px; 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text mit einem einfachen hellblauen Schatten

Der Farbparameter kann am Anfang oder Ende der Schattendefinition platziert werden. Sie können auch einen Weichzeichnungsradius hinzufügen, der anhand eines Gaußschen Weichzeichnungsalgorithmus beschreibt, wie stark der Schatten weichgezeichnet werden soll. Sehen Sie sich dazu den folgenden Beispielcode an:


.shadow3 { 
  color: black; 
  text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text mit einem weichgezeichneten hellblauen Schatten

Sie können auch einen Ausbreitungswert angeben. Ein positiver Wert gibt an, wie weit sich ein Schatten ausdehnt, wohingegen ein negativer Wert angibt, wie weit sich ein Schatten zusammenzieht. Im folgenden Codebeispiel wurde ein positiver Ausbreitungswert angewendet:


.shadow4 { 
  color: black; 
  text-shadow: skyblue 0px 0px 0px 4px; 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text mit einem hellblauen weichgezeichneten Schatten und angewendetem Ausbreitungswert

Der Effekt der text-shadow-Eigenschaft mit einer positiven Ausbreitung kann häufig durch Zeichnen einer entsprechenden Anzahl von Schatten ohne Ausbreitung imitiert werden. Das dazu erforderliche Markup ist allerdings komplexer und kann sowohl die Leistung als auch die Qualität des Schattens beeinträchtigen. In Browsern ohne entsprechende Unterstützung kann dieser Ansatz jedoch zum Imitieren des Ausbreitungseffekts notwendig sein. Nehmen wir folgendes Codebeispiel:


.shadow4_nospread { 
  color: black; 
  text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, 
    skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, 
    skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; 
}	

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text mit einem hellblauen weichgezeichneten Schatten und angewendetem Ausbreitungswert

Der Ausbreitungsparameter vereinfacht diesen Effekt erheblich. Sie können ihn auch wie im folgenden Beispiel verwenden, um Effekte zu erzeugen, die andernfalls bei Verwendung negativer Werte nicht möglich wären:


.shadow5 { 
  text-shadow: 5px 5px 2px -2px #9966CC; 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot des mit dem Ausbreitungsparameter erzielten Ergebnisses

Die fünf Parameter in diesem Beispiel definieren einen einzigen Schatten. Die text-shadow-Eigenschaft unterstützt auch eine von vorn nach hinten gestapelte Liste von Schatten.

Das nächste Beispiel zeigt einen Textschatten, der sich aus fünf von vorn nach hinten aufgelisteten Schatten zusammensetzt:

  • einem teilweise transparenten weißen Schatten
  • einem gelben Schatten
  • einem orangefarbenen Schatten, der oben gezeichnet wird
  • einem roten Schatten

.shadow6 { 
  text-shadow: rgba(255, 255, 255, .5) 1px 1px, 
    yellow 2px 3px, 
    rgba(255, 153, 0, .7) 3px 6px,
    rgba(255, 0, 0, .5) 4px 8px; 
}

Der vorangehende Codeausschnitt sieht wie folgt aus.

Screenshot von Text, auf den mehrere Schatten angewendet wurden

Da der Ausbreitungswertparameter gegenwärtig nicht von allen Browsern unterstützt wird, sollten Sie ggf. eine Fallbackversion hinzufügen, um maximale Interoperabilität sicherzustellen. Der Ausbreitungsparameter wird von Browsern, die ihn nicht unterstützen, als ungültig analysiert. Stellen Sie bei Verwendung des letzten Parameters sicher, dass Ihr Markup eine Fallbackversion von text-shadow ohne den Ausbreitungsparameter enthält, da in Browsern ohne entsprechende Unterstützung andernfalls kein Textschatten angezeigt wird.


.shadow7 {
  color: black;
  text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
  text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
}

In Browsern, die den Ausbreitungsparameter nicht unterstützen, sieht der vorangehende Codeausschnitt wie folgt aus.

Screenshot von schattiertem Text in einem Browser, der den Ausbreitungsparameter nicht unterstützt

In Browsern, die den Ausbreitungsparameter unterstützen (einschließlich Internet Explorer 10), sieht der vorangehende Codeausschnitt wie folgt aus.

Screenshot von schattiertem Text in einem Browser, der den Ausbreitungsparameter unterstützt

Die Textausbreitung ermöglicht viele weitere Effekte wie gestrichelten Text, dunklere weichgezeichnete Schatten oder schmalere Schatten.

Verbesserungen

Wenn Sie mit der proprietären Unterstützung von Windows Internet Explorer für CSS-Filter vertraut sind, wissen Sie vielleicht bereits, dass Textschatten zuvor mit den Filtern DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow und DXImageTransform.Microsoft.Blur erzeugt werden konnten. CSS-Filter werden in Internet Explorer 10 nur dann noch unterstützt, wenn der Browser in einem Kompatibilitätsmodus für ältere Dokumente ausgeführt wird. (Weitere Informationen zu Dokumentmodi finden Sie unter Definieren der Dokumentkompatibilität.)

Anstelle dieser DXImageTransform-Filter verwenden Sie die text-shadow-Eigenschaft für Internet Explorer 10, um einen Textschatteneffekt zu erzielen. Internet Explorer 10 erzeugt den Effekt nicht nur auf eine mit den Standards konformen und interoperable Weise, sondern sorgt durch hardwarebeschleunigte Grafiken auch für deutliche Leistungsverbesserungen gegenüber der überholten Alternative.

Fallbackverhalten

Websites, für die heute die text-shadow-Eigenschaft verwendet wird, verursachen in Browsern, die diese Eigenschaft nicht unterstützen, keine Fehler. In vielen aktuellen Verwendungsfällen von text-shadow im Web dient der Textschatten als dezente Dekoration, die zusätzliche visuelle Tiefe schafft. text-shadow kann jedoch auch verwendet werden, um kreativere visuelle Effekte zu erzeugen. Denken Sie jedoch daran, dass einige Browser die text-shadow-Eigenschaft nicht unterstützen. Die folgende Abbildung zeigt z. B., wie Text, auf den die text-shadow-Eigenschaft angewendet wurde, in Windows Internet Explorer 9 angezeigt wird:

Screenshot von Text mit angewendeter text-shadow-Eigenschaft und schlechtem Fallbackverhalten in Internet Explorer 9

Der Text soll in Internet Explorer 10 und anderen Browsern, die text-shadow unterstützen, wie folgt angezeigt werden:

Screenshot von Text mit angewendeter text-shadow-Eigenschaft und schlechtem Fallbackverhalten in Internet Explorer 10

Falls Sie Browser ohne Unterstützung für die text-shadow-Eigenschaft unterstützen müssen und diese künstlerische Freiheit nutzen möchten, sollten Sie unbedingt die Featureerkennung für textShadow im CSS-Objektmodell (CSSOM) verwenden, um die Farbe des Textes bedingt zu ändern.

Das folgende Codebeispiel führt bei der Anzeige in Browsern, die text-shadow nicht unterstützen, z. B. zu einem korrekten Fallbackverhalten:


if (typeof document.body.style.textShadow == 'undefined') {
  // text-shadow is not supported
  document.body.style.color = 'black';
}	
else {
  // text-shadow is supported
  document.body.style.color = '#FFFFCC';
  document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}

Probieren Sie "text-shadow" aus

Probieren Sie text-shadow noch heute aus! Falls Sie die Eigenschaft bereits verwenden, können Sie die neuen Möglichkeiten erkunden, die der spread-Parameter bietet. Mit mehreren Schatten und einer Optimierung der verschiedenen Parameter können einige attraktive Effekte erzeugt werden.

Hier sehen Sie unsere Galerie interessanter und verrückter Textschatteneffekte:

Screenshot mehrerer unterschiedlicher Textschatteneffekte

Sie können eine Liveversion dieser Galerie anzeigen.

Nächste Schritte

Sie können die text-shadow-Eigenschaft mit Web Open Font Format (WOFF)-Schriftarten und Eingabeelementen und in Verbindung mit Cascading Stylesheet Level 3 (CSS3)-Übergängen und -Animationen einsetzen. Falls Sie einen Browser verwenden, der sowohl "text-shadow" als auch CSS-Übergänge und -Animationen unterstützt, besuchen Sie die verknüpfte Galerie, um die Features zusammen in Aktion zu sehen. Anschließend können Sie den HTML-Quellcode oder mit F12-Entwicklertools das Markup anzeigen.

Mit der Demo zur IE-TestversionSo geht's: text-shadow können Sie interaktiv mit Textschatten experimentieren. Entdecken Sie, wie einfach Sie Ihren Text zum Leben erwecken können!

 

 

Anzeigen:
© 2014 Microsoft