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.

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.


Anzeige

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:


Anzeige

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

Unuk WordPress Theme.
Gemacht, um zu Bloggen

unuk-wordpress-theme-sailing-660

Download

Treue-Rabatt für pixeltuner.de-Leser!
Gebe bei Deiner Bestellung den Gutschein-Code "150911-10" ein und Du erhältst einen Rabatt in Wert von 10 Euro.

Jonathan

Hi, ich bin Jonathan Torke, WordPress-Programmierer. 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.

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

Schreibe einen Kommentar

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

Jetzt das eigene Projekt starten mit den webgo Webhosting Paketen
Anzeige