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 (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
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
19 Kommentare
4 Trackbacks
- Links September 2009 | funkygog Blog - [...] mit css-Schatten versehen [...]
- 10 resources to get the most out of the CSS text-shadow property - [...] Another nice text effect created using the text-shadow property. The page is in German, but happily everyone can understand ...
- 10 resources to get the most out of the CSS text-shadow property – multimediaDev - [...] Another nice text effect created using the text-shadow property. The page is in German, but fortunately everyone can understand ...
- Protokoll vom 23. Januar 2010beiTrackback - [...] Beeindruckende Grafik-Effekte für Überschriften ohne Grafikprogramm [...]
Kommentar schreiben
23. September 2009
Sehr interessanter Artikel. Tolle Beispiele. Die Mehrfachverwendung war mir auch neu. CSS3 bietet so viele tolle Möglichkeiten
23. September 2009
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.
23. September 2009
Ich fürchte nur, dass Deine Hoffnung auf die Unterstützung im IE nicht so schnell erfüllt werden.
23. September 2009
Ja, das wirst Du leider Recht behalten. Ich werde mich dennoch nicht scheuen, fröhlichen Gebrauch davon zu machen.
23. September 2009
der wohl beste deutsche webdesigner blog! danke man
p.s hab dein theme benutzt
23. September 2009
Deine Beschreibung ehrt mich. Vielen Dank!
23. September 2009
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.
23. September 2009
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
23. September 2009
Sehr interessant. Wollte bisher noch keine Schatten einsetzen, aber deine Beschreibungen sind sehr schön und verständlich. Werde ich morgen gleich mal ausprobieren.
23. September 2009
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.
16. Oktober 2009
Wie heißt die Schriftart?
16. Oktober 2009
In den letzten vier Beispielen habe ich Georgia verwendet. In den anderen Helvetica Neue.
16. Oktober 2009
danke
26. Januar 2010
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…?
4. Februar 2010
Echt coole Effekte und eine tolle Seite
5. Februar 2010
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?
5. Februar 2010
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
5. Februar 2010
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
15. Februar 2010
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