CSS3 text-shadow

Das Ziel der CSS Eigenschaft für Textschatten ist es, Webdesigner und CSS-Programmierer ein Werkzeug in die Hand zu legen, mit dem Text-Effekte, ohne die Darstellung von Bilder, erzeugt- und in Webseiten eingebunden werden können. Die CSS3-Eigenschaft text-shadow lässt dir eine Vielzahl an Möglichkeiten dich kreativ auszutoben.

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 nämlich 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 negativ auf die Ladezeit der Webseite aus.

Sprungmarken:

• CSS Textschatten
• Browserkompatibilität
• Wie man CSS3 text-shadow benutzt
• 12 Beispiele für den CSS3-Einsatz von Textschatten

Was in Photoshop beispielsweise 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.

CSS Textschatten

Die text-shadow-Eigenschaft wurde bereits in CSS 2.0 eingeführt. Jedoch wurde diese CSS-Eigenschaft von keinen Browser implementiert. In CSS 2.1 wurde die Textschatten-Eigenschaft entfernt und erst wieder in CSS3 in Kraft gesetzt. Daraufhin fingen einige Browser mit der Umsetzung des Text-Schatten an.

Die Browser-Umsetzung der Textschatten-Eigenschaft wurde leider nicht, wie erhofft, von allen Browsern übernommen.

Browserkompatibilität

Derzeit wird die CSS-Textschatten-Eigenschaft 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. Aber es ist auch Möglich einige Teile der Textschatten-Eigenschaft durch Tricks in den 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 den CSS3-Einsatz von Textschatten

Im Folgendem zeige ich dir 12 Beispiele für den Einsatz der CSS-Textschatten-Eigenschaft. Frei nach dem Motto “No Idea Limit” sind dem kreativen Designer kaum Grenzen gesetzt um mit der flexiblen Textschatten-Eigenschaft Texte zu dekorieren.

1. Einfacher Text-Schatten

CSS Code für “Einfacher Text-Schatten”:

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 für Stapel Text-Schatten:

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 für “Text-Schatten Smooth”:

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 für Kontur:

p
{
    color: #E7E7E7;
    text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;
}

Beispiel:

Kontur

6. Buchdruck (inset)

CSS Code für Buchdruck (inset):

p
{
    background: none repeat scroll 0 0 #DBDBDB;
    color: #CCCCCC;
    text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;
}

Letterpress

7. Buchdruck (emboss)

CSS Code für Buchdruck (emboss):

p
{
    background: none repeat scroll 0 0 #CCCCCC;
    color: #DBDBDB;
    text-shadow: 0 -1px 1px #FFFFFF, 0 1px 1px #666666;
}

Beispiel:

Emboss

8. Glow-Effekt

CSS Code für den Glow-Effekt:

p
{
    color: #222222;
    text-shadow: 0 0 0.2em #8877FF, 0 0 0.2em #8877FF, 0 0 0.2em #8877FF;
}

Beispiel:

Glow-Effekt

9. Text-Schatten Neon

CSS Code für Text-Schatten Neon:

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 für Text-Schatten Anaglyphen:

p
{
    color: rgba(0, 168, 255, 0.5);
    text-shadow: 5px 5px 0 rgba(255, 0, 180, 0.5);
}

Beispiel:

Anaglyphen

11. Vintage

Der Retro und Vintage Look sind im Trend. Retro und Vintage-Elemente finden große Beliebtheit im Designkontext. Online-Shops, Portfolios und Blogs integrieren diesen Stil.

CSS Code für Text-Schatten Vintage:

p
{
    background: none repeat scroll 0 0 #EEEEEE;
    color: #707070;
    text-shadow: 3px 3px 0 #EEEEEE, 5px 5px 0 #707070;
}

Beispiel:

Vintage Retro

12. Text-Schatten Feuer

Durch mehrfach eingesetzte Textschatten ergeben sich je nach Idee und kreativen Ergüssen eine Vielzahl an Darstellungsmöglichkeiten. So steht es dem Designer natürlich auch frei die Textschatten-Eigenschaft für Eigenes zweck zu entfremden. Wie beispielsweise für das Visualisieren von Feuer.

CSS Code für Text-Schatten Feuer:

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

Bei Fragen und Verbesserungsvorschlägen zur CSS-Eigenschaft text-shadow, kannst du gern einen Kommentar schreiben oder eine Email an mich schicken.