Dieser Artikel ist Teil einer Serie:
Seit den Releases von Firefox 3 und Opera 9.5 stehen wir in einem neuen Browser-Zeitalter. Zwar wird der Internet Explorer dieses Zeitalter erst in 2-3 Jahren erreichen, aber trotzdem kann man mittlerweile eine ganze Menge CSS sinnvoll einsetzen, das noch vor ein paar Monaten kaum irgendwo funktionierte. Klar, im IE sieht man nichts davon, aber das muss uns nicht aufhalten, progressive enhancement ist das Zauberwort. Heißt: Die Website ist im Internet Explorer benutzbar, aber mit den neueren CSS-Features verleihen wir dem Ganzen in allen ordentlichen Browsern zusätzlichen Glanz. Ein Beispiel dafür ist text-shadow
.
Was macht text-shadow
?
Diese Frage lässt sich einfach beantworten: Mit text-shadow
zaubert man sich mittels CSS einen Schatteneffekt unter Text. Sowohl Farbe als auch Versatz und Schattenradius lassen sich festlegen.

Wie benutzt man text-shadow
?
Es gibt vier Paramter:
.schatten {
text-shadow: #000000 4px -4px 2px;
}
Der erste Wert beschreibt die Farbe des Schattens, die nächsten beiden den Versatz auf X- und Y-Achse, während der letzte Wert die Härte des Schattens bestimmt; je höher der Wert, umso weicher der Schatten. Im Übrigen kann man auch mehrere Schatten definieren:
.schatten {
text-shadow: #000000 4px -4px 2px, #FF0000 -1em 1em 0.5em, #CC0000 -2px -4px px;
}
Damit könnte man zum Beispiel einen Feuer-Effekt zaubern.
Welche Browser können text-shadow
?
Opera seit Version 9.5 und Safari bereits seit Urzeiten – Firefox wird Ende dieses Jahres mit Version 3.1 nachziehen. Ob der Internet Explorer jemals text-shadow
unterstützten wird, wissen allein die Götter. Es existieren für den IE mit DropShadow
und Glow
zwei proprietäre Funktionen, die einen ähnlichen Effekt wie text-shadow
haben, die jedoch um einiges weniger gut ausehen, weniger flexibel sind und so keine ernsthafte Alternative darstellen.
Sofern man allerdings die Lesbarkeit seines Textes nicht vom Schatteneffekt abhängig macht, kann man text-shadow
ohne Bedenken benutzen.
Noch mehr schönes neues CSS?
Falls Interesse besteht, könnte ich noch ein paar weitere Aspekte unserer schönen neuen CSS-Welt vorstellen. Unter anderem stünden die neuen Möglichkeiten der Farbangabe (RGBA und HSLA) oder font-size-adjust
zur Auswahl. Lasst mich wissen falls ihr irgendwas davon haben wollt.
Kommentare (22)
Michel ¶
30. Juni 2008, 22:20 Uhr
font-size-adjust klingt interessant.
Lothar ¶
30. Juni 2008, 22:44 Uhr
"Zwar wird der Internet Explorer dieses Zeitalter erst in 2-3 Jahren erreichen..." - das nenn ich mal echten Optimismus. ;-)
Lou ¶
30. Juni 2008, 23:03 Uhr
Sehe weder in Opera 9.5 noch Firefox 3 einen Schatten in deiner Demo!?
Juicy ¶
30. Juni 2008, 23:19 Uhr
Im Firefox ab Version 3.1.
Im Opera 9.5 sehe ich den Schatten ohne Probleme.
Peter ¶
30. Juni 2008, 23:26 Uhr
Zitat Lothar:
Naja, die aktuellste IE-Version zu diesem Zeitpunkt wird so weit sein. Aber nicht alle werden diese Version verwenden, d.h. die Bremsen-Funktion wird der IE sicher nicht los.
Herr Gabriel ¶
1. Juli 2008, 06:58 Uhr
Ich bin gespannt, wie sinnig diese Effekte künftig auf Webseiten eingesetzt wird.
Kaeptn ¶
1. Juli 2008, 07:47 Uhr
Jo mich würden auch die font size und auch die Farbangabe interessieren...
Greetz Kaeptn
momonster ¶
1. Juli 2008, 10:43 Uhr
Nicht zu vergessen den Konqueror, der schon seit geraumer Zeit mit text-shadow umgehen kann.
Userfriendly ¶
1. Juli 2008, 16:34 Uhr
Schön, dass wenigstens nicht jeder Volltrottel CSS kann. So bleiben wir zumindest teilweise von Augenkrebs-Websites verschont.
egoh ¶
1. Juli 2008, 19:07 Uhr
Interessiere mich auch für weitere kleine CSS-Schmankerl, die man bisher eigentlich nicht einsetzen konnte.
Peter ¶
1. Juli 2008, 22:48 Uhr
Zitat Userfriendly:
Na komm,
<blink>
ist doch auch nicht besser.Lexx ¶
3. Juli 2008, 09:55 Uhr
<blink>
ist episch. :>Maxi ¶
3. Juli 2008, 17:01 Uhr
Wie siehts aus, kann man mit CSS auch einen Schatten unter ein Element zaubern, oder geht das bislang nur mit Buchstaben?
Peter ¶
4. Juli 2008, 13:04 Uhr
Geht meines Wissens nur bei Text.
Svenja ¶
29. August 2008, 05:18 Uhr
Ich lieeebe diesen Blog, das Layout ist einfach mega klasse und sehr angenehm zu lesen.
Mit den Schatteneffekten habe ich aber so meine Probleme. Ich habe erstmals mit iWeb auf dem Mac gearbeitet und viele Schatten erzeugt. Firefox zeigt keinen einzigen davon, der IE7 aber problemlos alle. Safari kann auch alles richtig darstellen. Schade, dass gerade der Firefox mich so hängenlässt.
Ach ja: www.transgender-kiel.de falls jemand mal schauen mag.
Viele Grüße, Svenja
Peter ¶
29. August 2008, 05:23 Uhr
Zitat Svenja:
Firefox 3.1. wird das können und ist ja auch schon in Arbeit.
Webagentur ¶
30. August 2008, 12:11 Uhr
Eigentlich habe ich über Google was anderes wegen CSS gesucht, aber jetzt bin ich zufällig hier gelandet. Ich kannte diesen Effekt in CSS noch gar nicht. Schade das der Firefox 2.0 das nicht unterstützt. Aber für die Zukunft sehe ich es positiv.
Schadi ¶
22. Mai 2009, 11:07 Uhr
MEHR DAVON BITTE! :D
Wäre wirkllich super, hat mir sehr weitergeholfen! Danke! Lg Schadi
Maik ¶
9. April 2010, 07:53 Uhr
Danke für diesen guten Beitrag zum Schattenspiel. Kleiner Hinweis: beim Farbwert in Source-Beispielen fehlt eine "0" - #00000. Nach Copypaste kam erstmal Frust auf, weil's im FF nicht ging ;)
Peter ¶
9. April 2010, 09:49 Uhr
Danke für den Hinweis, ist repariert.
Vitaliy ¶
27. März 2013, 23:46 Uhr
Vielen Dank für die Serie. In der Mitte eingestiegen wollte ich dann doch alles lesen ;) Was mir persönlich fehlt ist eine Javascript Lösung für ältere Browser.. Gibt es die überhaupt, oder bleibt es ein Traum?
Peter Kröner ¶
28. März 2013, 09:47 Uhr
Es gibt CSS3 Pie das kann aber auch nur Box-Schatten und allgemein eher so mittel-empfehlenswert. Ich würde die alten Browser einfach ignorieren, Schatteneffekte sollten nichts sein, mit dem das Design einer Seite steht und fällt.