CSS3 ist ein Segen für jeden Webdesigner. Mit dem Einsatz einfacher CSS-Eigenschaften lassen sich mit ein paar Zeilen Code tolle Effekte erzielen. Man kann sich so den Umweg über Bilder sparen und somit zur Suchmaschinenlesbarkeit, Performance und Sauberkeit des Codes beitragen.

s. a. Artikel vom 23. September 2009
Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow

Weil mich interessiert, in wie weit die CSS3-Eigenschaft text-shadow bereits eingesetzt wird, habe ich mal im Netz umgesehen. Ich bin fündig geworden und habe ein paar Beispiele hier zusammengestellt.

1. MetaLab

Link zur Website

2. LittleSnapper

Link zur Website

3. Thermometer App

Link zur Website

4. Iced Cocoa – Keymote

Link zur Website

5. wpSEO

Link zur Website

6. Checkout App

Link zur Website

7. CSSEdit

Link zur Website

8. Server Density

Link zur Website

9. WordPress.com

Link zur Website

10. Tim Van Damme

Link zur Website

11. Ego App

Link zur Website

12. Snow Reports App

Link zur Website

13. atebits

Link zur Website

14. Rogie King

Link zur Website

15. Gilbert Pellegrom

Link zur Website

16. siteInspire

Link zur Website

17. Fusion Ads

Link zur Website

18. My Brand HQ

Link zur Website

19. MonAssoc

Link zur Website

20. Squarespace Blog

Link zur Website

21. For A Beautiful Web

Link zur Website

22. MacHeist

Link zur Website

23. CSS Wizardry

Link zur Website

24. Tommy Day

Link zur Website

25. Webtrendmap

Link zur Website

Moderne Browser können es schon. Des Webdesigners natürlicher Feind IE verweigert sich noch. Mit der CSS3-Eigenschaft text-shadow lassen sich tolle Effekte erzielen. Besonders interessant wird es, wenn man mehrere Textschatten auf einmal anwendet. Effekte wie Letterpress oder glühender Text sind dann wenige Zeilen CSS.

Für IE-Nutzer! Die folgenden Texteffekte sind nur in richtigen Browsern zu sehen.
Zur Verdeutlichung die Demo als Bild. Es ist Zeit zum Umsteigen.

CSS-Eigenschaft text-shadow

Viele von Euch kennen sie sicher schon und man sieht sie im Web immer häufiger. Die CSS3-Eigenschaft text-shadow. Man kann mit ihr in wenigen Zeilen CSS beeindruckende Effekte erzielen. Benutzer des Internet-Explorers kommen noch nicht in ihren Genuss. Auch der IE8 verweigert sich und kann/will sie nicht abbilden. Wenn man das in Kauf nimmt, kann man bereits viele schöne Sachen mit text-shadow anstellen.

Sprungmarken

• Die Schreibweise (einfacher Textschatten)
• Beispiele einfacher Textschatten
• Textschatten kombinieren
• Die Schreibweise (mehrfache Textschatten)
• Beispiele mehrfacher Textschatten
• Sonstige Spielereien

Die Schreibweise

.shadow {
    text-shadow: 1px 1px 0px #000;
    /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Bemerkung:
Der Aufbau von text-shadow ist einfach. Der erste Wert gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert den Grad der Unschärfe des Schattens und als letztes wird die Farbe des Schattens definiert.

Beispiele einfacher Textschatten

Es ist also auf einfache Art und Weise möglich, einem HTML-Text mit text-shadow eine gewisse Tiefe und Plastizität zu verleihen.

Das CSS dazu:

background:#404040;
color:#fff;
text-shadow: 1px 1px 0px #000;

Auf hellem Hintergrund mit dunkler Schrift kann ein weißer Textschatten interessant wirken.

Das CSS dazu:

background:#ccc;
color:#505050;
text-shadow: 1px 1px 0px #fff;

Textschatten kombinieren

Das (zumindest für mich) wirklich Neue ist, dass man Textschatten auch kombinieren kann. Es können mehrere Textschatten auf ein und denselben Text angewendet werden. Das öffnet natürlich einige Türen.

Viele kennen das sicher aus Photoshop. Um einem Objekt Plastizität zu verleihen, wendet man oben einen dunklen Schatten nach innen und unten einen hellen Schlagschatten an oder umgekehrt. Dies lässt sich nun auch mit text-shadow erreichen.

Die Schreibweise

.shadow {
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    /* Schatten #1 Versatz links - Versatz oben - Unschärfe (Blur) - Farbe,
    Schatten #2 Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Bemerkung:
Mehrere Schatten für denselben Text können durch Kommas getrennt hintereinandergesetzt werden. Den Schatten nach innen erzeuge ich mit negativen Werten für den x- und y-Versatz und einer dunklen Farbe. Der helle Schlagschatten wird wie gehabt mit einem Versatz von 1px von links und von oben erzeugt.

Beispiele mehrfacher Textschatten

Zur Verdeutlichung wende ich obiges Beispiel auf einem dunklen Hintergrund an.

Das CSS dazu:

background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

Die Kombination auf hellem Hintergrund würde wie folgt aussehen.

Das CSS dazu:

background:#ccc;
color:#505050;
text-shadow: -1px -1px 0px #202020, 1px 1px 0px #fff;

Sonstige Spielereien

Die Kombination mehrerer Textschatten lässt natürlich noch viele weitere Spielereien zu. Im Gegensatz zum Letterpress-Effekt kann auch der Emboss-Effekt (Abgeflachte Kante Relief) erzeugt werden.

Das CSS dazu:

background:#404040;
color:#505050;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

Mit dem Einsatz des Wertes für die Unschärfe (Blur) kann man beispielsweise einen glühenden Text erzeugen.

Das CSS dazu:

background:#404040;
color:#00ff0f;
text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;

Fazit

Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.

Relevante Links

• W3C zur CSS-Eigenschaft text-shadow (dt. Übersetzung)
• Create a Letterpress Effect with CSS Text-Shadow
• Exploring CSS3 text-shadow