Das Ziel der CSS Eigenschaft für Textschatten ist, Webdesignern und CSS-Programmierern ein Werkzeug in die Hand zu legen, mit dem Text-Effekte ohne die Darstellung von Bildern erzeugt- und in Webseiten eingebunden werden können. Die CSS3-Eigenschaft text-shadow
lässt Dir dazu eine Vielzahl an kreativen Möglichkeiten.
Mit dem Spiel von Farben, Versatz (Offset) und Unschärfe (Blur) lassen sich ziemlich geniale und coole Texteffekte für Deine Webseite erzeugen. Text-Effekte, die häufig durch Grafik- und Layout-Programme wie Photoshop erstellt werden, haben dagegen einen großen Nachteil für Webseiten: ein einziges Bild ist oftmals größer als der CSS-Code, der für das gesamte Design- und Layout der Website verwendet wird. Diese Tatsache wirkt sich unter anderem negativ auf die Ladezeit einer Webseite aus.
Sprungmarken:
- CSS Textschatten
- Browserkompatibilität
- Wie man CSS
text-shadow
benutzt - 12 Beispiele für Textschatten in CSS3
Was in Photoshop durch Ebenenstile wie „Schlagschatten“, „Schein nach außen“ und „Kontur“ möglich sind, wird durch die Textschatten-Eigenschaft in CSS3 für Webdesigner ermöglicht.
Einführung in CSS text-shadow
Die text-shadow
-Eigenschaft wurde bereits in CSS 2.0 eingeführt. Jedoch wurde das Textschatten-Styling von keinem Browser implementiert. In CSS 2.1 wurde diese Eigenschaft entfernt und erst wieder in CSS3 in Kraft gesetzt. Daraufhin fingen einige Browser mit der Umsetzung des Textschatten an.
Browserkompatibilität von CSS text-shadow
Die Browser-Umsetzung der CSS-Eigenschaft für textschatten wurde leider nicht von allen Browsern übernommen.
Derzeit wird die CSS-Textschatten von folgenden Browser unterstützt:
- Opera
- Chrome
- Safari
- Mozilla
- Konqueror
- iCab
Hier zeigt sich der Internet Explorer mal wieder als bekannte Spaßbremse und unterstützt den CSS Textschatten in keiner seiner Versionen < 10. Es ist jedoch Möglich, einige Teile der Textschatten-Eigenschaft durch Tricks für ältere Internet Explorer zu emulieren.
Beispielsweise kann man in älteren Internet Explorer-Versionen einen ähnlichen Effekt erreichen, indem auf die Filter-Klasse filter:DropShadow()
zurückgegriffen werden. Die Ergebnisse hierfür sind jedoch eher unbrauchbar → Textschatten im Internet Explorer.
Wie man CSS3 text-shadow benutzt
Nun zeige ich Dir, wie Du die Textschatten-Eigenschaft für die aktzeptierten Browser verwenden kannst. Die CSS-Eigenschaft für Textschatten wird mit den üblichen CSS-Eigenschaften für das grundlegende Aussehen gestylt.
Im CSS sollte die grundlegende Syntax wie folgt aussehen:
p { text-shadow: 1px 1px 1px #000; }
- Der erste Wert bestimmt den horizontalen Abstand (X-Versatz) des Schattens. Ein positiver Wert für den X-Versatz schiebt den Schatten nach rechts, ein negativer Wert nach links.
- Der zweite Wert definiert den vertikalen Abstand (Y-Versatz) des Schattens. Ein positiver Wert für den Y-Versatz positiniert den Schatten unter den Text, ein negativer Wert über den Text.
- Der dritte Wert beschreibt den Radius der Weichzeichnung. Je höher der Radius für den Schatten bestimmt wird, desto weicher wird dieser dargestellt.
- Der letzte Wert bestimmt die Farbe für den Schatten.
Mehrere Schatten für einen Text werden durch Kommata getrennt. Erlaubt ist zudem die Angabe none
.
Beachte: Die Angaben für den Textschatten eines Elements werden ohne dein Zutun an die Kindelemente vererbt.
12 Beispiele für Textschatten in CSS3
Nun zeige ich Dir 12 Beispiele für den Einsatz der CSS-text-shadow
-Eigenschaft. Frei nach dem Motto „No Idea Limit“ sind dem kreativen Designer kaum Grenzen gesetzt, um Texte für ihre Webseiten zu dekorieren.
1. Einfacher Text-Schatten
CSS Code:
p { color: #999999; text-shadow: 1px 1px #333333; }
Beispiel:
Einfacher Textschatten
2. Vollton (3D)
CSS Code für Vollton Text-Schatten:
p { text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc, 4px 4px #ccc, 5px 5px #ccc, 6px 6px #ccc; }
Beispiel:
Vollton Schatten
3. Stapel
CSS Code:
p { text-shadow: 1px 0 #EEEEEE, 0 1px #CCCCCC, 2px 1px #EEEEEE, 1px 2px #CCCCCC, 3px 2px #EEEEEE, 2px 3px #CCCCCC, 4px 3px #EEEEEE, 3px 4px #CCCCCC, 5px 4px #EEEEEE, 4px 5px #CCCCCC, 6px 5px #EEEEEE, 5px 6px #CCCCCC, 6px 6px #EEEEEE; }
Beispiel:
Beispieltext
4. Smooth
CSS Code:
p { text-shadow: 1px 0px 1px #eee, 0px 1px 1px #ccc, 2px 1px 1px #eee, 1px 2px 1px #ccc, 3px 2px 1px #eee, 2px 3px 1px #ccc, 4px 3px 1px #eee, 3px 4px 1px #ccc, 5px 4px 1px #eee, 4px 5px 1px #ccc, 6px 5px 1px #eee, 5px 6px 1px #ccc, 6px 6px 1px #eee; }
Beispiel:
Beispieltext
5. Text-Schatten als Kontur verwenden
Die CSS3-Eigenschaft text-shadow
lässt sich auch für die Kontur-Dartsellung verwenden.
CSS Code:
p { color: #E7E7E7; text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999; }
Beispiel:
Kontur
6. Buchdruck (inset)
CSS Code:
p { background: none repeat scroll 0 0 #DBDBDB; color: #CCCCCC; text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF; }
Beispiel:
Letterpress
7. Buchdruck (emboss)
CSS Code:
p { background: none repeat scroll 0 0 #CCCCCC; color: #DBDBDB; text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666; }
Beispiel:
Emboss
8. Glühen/Scheinen (Glow)
CSS Code:
p { color: #222222; text-shadow: 0 0 0.2em #8877FF, 0 0 0.2em #8877FF, 0 0 0.2em #8877FF; }
Beispiel:
Glow-Effekt
9. Neon
CSS Code:
p { background: none repeat scroll 0 0 #000000; color: #FFFFFF; text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #FF00DE; }
Beispiel:
Neon
10. Anaglyphen
CSS Code:
p { color: rgba(0, 168, 255, 0.5); text-shadow: 5px 5px 0 rgba(255, 0, 180, 0.5); }
Beispiel:
Anaglyphen
11. Vintage
Retro und Vintage-Elemente finden immer wieder große Beliebtheit im Designkontext. Online-Shops, Portfolios und Blogs integrieren diesen Stil.
CSS Code:
p { background: none repeat scroll 0 0 #EEEEEE; color: #707070; text-shadow: 3px 3px 0 #EEEEEE, 5px 5px 0 #707070; }
Beispiel:
Vintage Retro
12. Feuer
Durch mehrfach eingesetzte Textschatten ergeben sich je nach Idee und kreativen Ergüssen eine Vielzahl an Darstellungsmöglichkeiten wie beispielsweise für das Visualisieren von Feuer.
CSS Code:
p { text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }
Beispiel:
Feuer
Welche CSS-Textschatten-Effekte fehlen Dir in dieser Liste? Ich freue mich auf Dein Kommentar!
Super, dass hier regelmaessig soviel Zeit vor dem Computer verbracht wird.
Hey C=
bin hier grad drübergestolpert, und dachte für die Mühe die du die mit dem Post gemacht hast solltest du mit einem Kommentar belohnt werden ;)
Besonders die/das/der Anaglyphen gefällt mir. Das Neon solltest du mal in Verbindung mit CSS3-Transitions verwenden das die Schrift „aufglüht“ wenn man drüberfährt.
Danke für dieses echt gute und informative Tutorial!!!
Great blog here! Also your site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol
That’s not the host. My WordPress is optimized ;)
Thanks!
Sehr gelungene Übersicht! Besonders das Retro-Beispiel find ich gut, hatte bislang nur ‚eindimensionale‘ Shadows eingesetzt, dass man mit Kommas mehrere Ebenen erstellen kann, war mir neu. Man sollte zwar sparsam mit solchen Design-Elementen umgehen, aber um ein paar Highlights zu setzen durchaus geeignet. Danke für die Tipps!
Hi Heiko!
Ja, mit den text-shadow-Eigenschaften kann man durch die Schatten-Anreihung eine ganze Menge ausgefallende Anzeigemöglichkeiten erzeugen. Im Prinzip und praktisch ist der ist der Einsatzbereich von text-shadow in CSS unendlich. Den Retro-Style finde ich zudem auch sehr gut :)
Danke und lieben Gruß, Jonathan
Super Tutorial, paar Ideen wirklich nicht schlecht.
Danke dafür.
Würdest du uns vielleicht verraten wie die rote handgeschriebene Schrift heisst ? Sieht nämlich verdammt gut aus )
Weiter so!
Danke!
Die Schrift heisst Freestyle Script.
CSS3 ist schon wirklich eine geniale Erfindung bzw. Erweiterung zu CSS2. Immer wieder bin ich überrascht, welche tolle Funktionen die neue Version doch mit sich bringt. Mit CSS3 kann man ja jetzt sogar Berechnungen innerhalb einer Stylesheet-Regel durchführen. Einfach nur genial!
Ich hoffe, dass sich die Zukunft für CSS3 positiv entwickelt (und dass der IE irgendwann ausstirbt….)
Wäre doch schade, wenn aufgrund mangelnder Browserkompatibilität CSS3 irgendwann den Bach runtergeht..
Greetz
Andy
Wow! Ich wusste ja das CSS3 schon echt genial ist aber das man soviel mit Text-Shadow machen kann war mir neu! Echt coole ideen!
sehr gut aufgelistet und gut beschrieben – danke :)
Guter Beitrag! Leider wird der Feuer Effekt nicht angezeigt. Im firebug wird auch kein text-shadow angezeigt… scheint wohl ein Tipp-Fehler zu sein? :)
Hi Joerg,
Danke für den Hinweis zum fehlendem Feuer-CSS. Nun sollte das fehlende CSS Text-Schatten für Feuer wieder als Beispiel sichtbar sein.
Lieben Gruß, Jonathan
Vielen Dank für diese tollen CSS3 Beispiele! Haben mir gerade sehr geholfen.
Greetz,
– Frank –
Mir gefällt ja der „Letterpress“ Buchdruck (inset) Text Shadow am besten. Bin ein absoluter Fan von diesen Shadow, die anderen find ich klasse, weil man da erstmal sieht was sich mit CSS3 anstellen lässt, aber ich find sie etwas „überflüßig“. Trotzdem super Beitrag!…
Grüße, Vincent
Hi Vincent,
Lettepress-Text-Shadow find ich auch richtig klasse! Das Styling hat was!
Lieben Gruß
I will immediately grab your rss as I can not find your email subscription link or newsletter service. Do you’ve any? Please let me know so that I could subscribe. Thanks.
Moin Jonathan,
bin zufällig „irgend wie“ auf dieser Site gelandet und… hängen geblieben :-)
Du hast Deine viele Freizeit (?) hier sehr sinnvoll eingesetzt!
Großes Kompliment, sehr gut und verständlich beschrieben.
Vielen Dank dafür.
Gruß
Rio
Hi Rio,
von der Freizeit würd ich gern mehr bekommen :-)
Danke für deinen netten Kommentar!
lieben Gruß
I appreciate the insightful post. Thanks.
Super erklärt! So macht das lesen spaß!
Gesucht. Gefunden. Super erklärt. Dankeschön!
Super, danke für die tolle Übersicht. Wird jetzt nur noch Zeit, dass die Browser alle mitmachen : )
Schöne Zusammenfassung der verschiedenen Text-Effekte mit CSS3, ein paar kannte ich noch gar nicht :).
Schöne Auflistung von Textschattenspielereien. Auch wenn es darauf mit Sicherheit kein Copyright gibt, finde ich doch prinzipiell die Nennung von Inspirationsquellen – in Deinem Fall scheint es Chris Spooner gewesen zu sein (line25.com/articles/using-css-text-shadow-to-create-cool-text-effects) einen fairen Zug.
Mir kamen die Beispiele auch irgendwie bekannt vor ;)
Sehr schöner Artikel.
Immer wieder lesenswert, wenn ich neue Anregungen für schöne Textschatten brauche ;-)
Besonders die Anaglyphen fand ich interessant, werde ich sofort nutzen!
Hab‘ bei mir im Blog mal mit der text-shadow Eigenschaft eine Art CSS Blur-Effekt erzeugt. Diese Unschärfe zu erzeugen ist wirklich simpel und macht insbesondere bei Mouse-Over Zuständen einiges her ;o)
„My WordPress is optimized ;)“ ja mit werbung zugemuellt: ich wollte mich ueber text-shadow informieren und nicht beck’s trinken. hab aber trotzdem gefunden was ich gesucht hab, danke
Hey,
echt cooler Artikel, den Du hier geschrieben hast ;) Toll, was man mittlerweile alles in CSS3 so umsetzen kann.
Weiter so,
Fabian
Auch wenn ich mir jetzt nur das einfache Beispiel rauskopiere… Sehr beeindruckend! Danke!
Hallo Jonathan,
guter Artikel mit schönen Beispielen. Ich habe mir den Artikel mal als Anlass genommen und basierend auf deinen Ausführungen eine Text-Umrandung mit CSS3 erstellt.
Vielleicht willst du es ja mit aufnehmen, oder es interessiert hier den ein oder anderen.
Besten Gruß, Jens.
Vielen Dank für die Beispiele. Dieser Artikel ist immer wieder eine gute Anlaufstelle^^
Viele Grüße, Nico
BRILLIANT POST …..excellent use of the text shadow enhancing the text without overpowering it.
Gute Liste was mittlerweile alles möglich ist, im css3..
VG
Sehr schöne Auflistung, sehr gut erklärt.
Lesezeichen ist gesetzt! :)
Vielen Dank für die Mühe!
Super Einführung. Danke.
Tolle Beispiele! Super!
tolle Übersicht, danke! schade das der Textschatten kein richtiges inset kann, für weiche Schatten im Buchstaben…
Hab‘ mal versucht das Feuer zu animieren:
https://codepen.io/subnoodle/pen/pNEGaW
Genialer Post, herzlichen Dank.
Bester Post ueber CSS3 Schatten den ich bist jetzt gefunden habe.
Copy – Paste – Fertig! :)
TOP!
I’ve been having issues with my Windows hosting. It has set me back quite a bit while making the next list. This is the current list that I have. I should add another list in less than a week. I’ll let you all know when the next list is ready. Thank you for your patience.