Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow

23. September 2009 - XHTML / CSS - 35 Kommentare

Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow

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

.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.

Beispiel für einen weißen Text auf dunklem Hintergrund mit einem schwarzen Textschatten.

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.

Beispiel für einen dunklen Text auf hellem Hintergrund mit einem weißen Textschatten.

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.

Letterpress

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.

Letterpress

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.

Emboss

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 ist Acid!

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

Schlagwörter: ,

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Kommentare

  • Michael Oeser - am 23. September 2009 - Antworten

    Sehr interessanter Artikel. Tolle Beispiele. Die Mehrfachverwendung war mir auch neu. CSS3 bietet so viele tolle Möglichkeiten

    • Simon [webdemar] - am 23. September 2009 - Antworten

      Danke Michael! Ich bin, ehrlich gesagt, auch erst gestern auf diese Mehrfachanwendung gestoßen. Manchmal hilft es, offizielle W3C-Dokumente zu lesen :-) Ich hoffe nun, dass IE möglichst bald nachzieht, damit man die Geschichte websicher einsetzen kann.

      • thomas [aka kopflos] - am 23. September 2009 - Antworten

        Ich fürchte nur, dass Deine Hoffnung auf die Unterstützung im IE nicht so schnell erfüllt werden.

        • Simon [webdemar] - am 23. September 2009 - Antworten

          Ja, das wirst Du leider Recht behalten. Ich werde mich dennoch nicht scheuen, fröhlichen Gebrauch davon zu machen.

      • Luke - am 15. November 2010 - Antworten

        Websicher ist (wird), was eingesetzt wird (und nur das). Früher oder später…. Wir müssen es alles verwenden, jeder soll mal was wo verwenden, sonst ziehen die Heinies von IE nie nach

  • Matthias - am 23. September 2009 - Antworten

    der wohl beste deutsche webdesigner blog! danke man

    p.s hab dein theme benutzt

  • ocean90 - am 23. September 2009 - Antworten

    Hey,
    schöne Beispiele. Die Mehrfachanwendung war mir auch neu, ist
    eine super Sache. CSS 3 rockt! ;)

    Danke für den Artikel, freue mich auf weitere Artikel, weiter so.

    • Simon [webdemar] - am 23. September 2009 - Antworten

      Hi Dominik, vielen Dank für die Blumen! Ja, CSS3 ist ne echte Wohltat. Es wird in kürzester Zukunft noch einiges zu dem Thema kommen ;-)

  • Philipp - am 23. September 2009 - Antworten

    Sehr interessant. Wollte bisher noch keine Schatten einsetzen, aber deine Beschreibungen sind sehr schön und verständlich. Werde ich morgen gleich mal ausprobieren.

    • Simon [webdemar] - am 23. September 2009 - Antworten

      Immer ran an die Buletten :-) Wenn ein Design nicht darauf beruht, sondern nur von Textschatten unterstützt wird, hat man keinerlei Nachteile, denke ich. IE-Nutzer sehen halt (wie so oft) nix oder eben weniger.

  • max - am 16. Oktober 2009 - Antworten

    Wie heißt die Schriftart?

    • Simon [webdemar] - am 16. Oktober 2009 - Antworten

      In den letzten vier Beispielen habe ich Georgia verwendet. In den anderen Helvetica Neue.

  • max - am 16. Oktober 2009 - Antworten

    danke

  • Daniel - am 26. Januar 2010 - Antworten

    Habe erst jetzt durch Zufall deinen Artikel gefunden und wieder mal was gelernt. Ich habe mich allerdings gewundert, da Selfhtml gehauptet, die “text-shadow”-Eigenschaft sei wegen mangelnder Browser-Unterstützung aufgegeben worden und schon in CSS 2.1 nicht mehr enthalten (siehe http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_shadow). Aber das ist wohl ‘n Fehler, oder…?

  • Basti - am 4. Februar 2010 - Antworten

    Echt coole Effekte und eine tolle Seite :)

  • Daniel - am 5. Februar 2010 - Antworten

    Sorry wenn ich da nochmal nen Kommentar dranhänge, aber SELFHTML scheint tatsächlich richtig zu liegen. Beide text-shadow-Befehle, die ich in mein Projekt eingebaut habe (nach dem Muster auf diesen Seiten), erzeugen im CSS-Validator des W3C einen Fehler nach dem Motto “ist nicht Teil von CSS 2.1″. Kann man irgendwas tun, damit die Seiten trotz text-shadow noch fehlerfrei durchrauschen?

    • Simon [webdemar] - am 5. Februar 2010 - Antworten

      Moin Daniel, text-shadow valide in CSS 2 zu verwenden, wird Dir nicht gelingen. Du müsstest die Seiten dann eben nach CSS 3 validieren lassen (s. Weitere Optionen). Dann gibt es keine Fehler. Es geht also nur cool ODER spießig ;-)

      • Daniel - am 5. Februar 2010 - Antworten

        Ach sooooo! Hatte diese Optionen bisher gar nicht gesehen. Na, dann nehme ich doch lieber COOL. :-)

        (Aber da der Validator ohnehin fast immer überlastet ist, sollte man das vielleicht ohnehin nicht zu ernst nehmen…)

        Danke für die Antwort

  • nox - am 15. Februar 2010 - Antworten

    oder man cheated und hängt die css eigenschaft nachträglich via js an. das ist zwar nicht wirklich valide aber zumindenst sieht der validator nix davon xD

  • Fimbim - am 10. Mai 2010 - Antworten

    Super,
    vielen Dank. Bei dem Beispiel mit mehrfacher Textschatten ist das Wort “Letterpress” doch aber gesifred, oder? Sehr schöne Effekte.

  • dcn - am 1. September 2010 - Antworten

    hilfreicher Artikel.
    Danke dafür…

  • Michael - am 6. Oktober 2010 - Antworten

    Danke für diesen Artikel!
    Vorallem “Beispiele mehrfacher Textschatten” ist super :)

    Gruss aus der Schweiz

  • Markus Steiger - am 12. Oktober 2010 - Antworten

    Guter Artikel. Anmerkung: Immer verschiedene Farben (mit genügendem Kontrast) für Schrift und Background. Sonst sieht man im IE nichts. Ich erlaube mir noch den einen Link zu meinem Test-Tool für text-shadow anzufügen: http://www.01241.com/01/text-shadow-tool.html

    Gruss

    Markus

  • Matthias F. - am 15. Februar 2011 - Antworten

    Schöner Artikel, muss ich wirklich sagen. Gut erklärt, gut mit Beispielen ausgestattet.
    Das Gute an der Funktion ist: Wer sie sehen kann (neuere Browser) hat seine Freude dran, wer nicht, sieht halt den normalen Text.

  • ConnyLo - am 8. März 2011 - Antworten

    Super Aufstellung, auf die man automatisch kommen muss, wenn man »text-shadow« googlet. Prima, dass man die ganzen Beispiele vor Augen hat. Wir sind halt visuelle Typen ;-)

  • Andrew von der Beck - am 14. März 2011 - Antworten

    Wollte auch bisher keine Schatten einsetzen, aber die Beschreibungen sind verständlich. Hab’s schon ausprobiert und ich finde die klasse. danke!

Trackbacks

Deine Meinung