CSS text-shadow: Geniale Texteffekte mit CSS3

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.

Anzeige

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.

Artikelbild für CSS Textschatten

Sprungmarken:

Anzeige

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.

css-text-shadow-beschreibung

Im CSS sollte die grundlegende Syntax wie folgt aussehen:

p
{
text-shadow: 1px 1px 1px #000;
}
  1. 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.
  2. 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.
  3. Der dritte Wert beschreibt den Radius der Weichzeichnung. Je höher der Radius für den Schatten bestimmt wird, desto weicher wird dieser dargestellt.
  4. 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!

War dieser Artikel hilfreich? Ja Nein
Gesponsert von Shutterstock
Gratis!

100+ Mockup PSD Designs

Abonniere den Pixeltuner Newsletter und erhalte das einzigartige Photoshop Gratispaket mit über 100 Geräte- und Browser Mockups.
Jonathan

Hi, ich bin Jonathan Torke, WordPress-Programmierer und Fachautor. Auf pixeltuner.de blogge ich über Webdesign und Social Media. Außerdem teile ich über Twitter täglich frische Ressourcen für Webdesigner und -Entwickler. Du findest mich auch bei Google+, Facebook und deviantART.

33 Antworten auf "CSS text-shadow: Geniale Texteffekte mit CSS3"
  • 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.

  • 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!

    • Jonathan

      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

  • false:

    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!

  • 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

  • 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

  • Rio:

    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

  • Lehnhard Lützen:

    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.

  • 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!

  • Daniel:

    “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

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

     text-shadow: 	
    0px 0px #fff, 
    1px 1px #fff,	2px 2px #fff, 3px 3px 2px #fff,	
    -1px -1px #fff, -2px -2px #fff, -3px -3px 2px #fff,
    1px -1px #fff, 2px -2px #fff,	3px -3px 2px #fff,
    -1px 1px #fff, -2px 2px #fff,	-3px 3px 2px #fff;
    

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a target="" href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <ul> <ol> <li> <ins datetime=""> <pre lang="" line=""> <span style=""> <img width="" height="" src="" alt="">

Anzeige

Abonniere den Pixeltuner Newsletter und erhalte das einzigartige Photoshop Gratispaket mit über 100 Geräte- und Browser Mockups.

Jederzeit kündbar. Kein Spam!
Anzeige