Kuratierte Linksammlung für Webdesigner und -entwickler.

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.

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:

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;
}
  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!

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART. PayPal-Kaffeespende.

44 Antworten auf "CSS text-shadow: Geniale Texteffekte mit CSS3"

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige