Text mit Schatten über CSS text-shadow

Einen Text mit Schatten zu produzieren, ist mit CSS3 (der Befehl tauchte bereits in CSS2 auf) nun einfach möglich. Vor diesem Befehl musste man Grafikprogramme bemühen und der Inhalt wurde für sehbehinderte (und Google) nicht mehr lesbar. Mit dem Schatteneffekt sind tolle Effekte möglich. Im ersten Schritt, die Einsatzweise von text-shadow für einen einfachen Textschatten.

Textschatten sind sehr einfach anwendbar, durch Kombination erhalten wir dann Aha-Effekte. Davor stehen aber erst die Grundlagen von der CSS-Anweisung text-shadow und die prinzipielle Anwendung, was in diesem Kapitel gezeigt wird. Als kleinen Vorgeschmack, was mit text-shadow möglich ist, folgende Ausgabe:

Möglichkeiten über CSS3 und text-shadow
Möglichkeiten über CSS3 und text-shadow

Der Aufbau des CSS-Befehls ist nahezu identisch wie bei box-shadow:

text-shadow: 5px 10px 8px orange;

Die ersten 2 Werte sind der X-Versatz und der Y-Versatz. Der 3. Wert bestimmt wie weich oder hart der Schatten ist und die 4. Angabe die Farbe des Textschattens.

Schauen wir es uns direkt im Beispiel an. Unser Inhalt für die HTML-Seite:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textschatten: text-shadow</title>
    <link href="css3-text-shadow.css" rel="stylesheet">
</head>
<body>
<h1>Textschatten: CSS3 text-shadow</h1>
</body>
</html>

Im CSS-Bereich gehen wir nun auf die Überschrift los und geben dieser eine größere Schriftgröße mit, damit wir den Effekt beim Textschatten besser sehen. Zusätzlich nehmen wir eine serifenlose Schrift.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
}

Bisher haben wir noch nichts Ungewöhnliches. Jetzt geben wir über text-shadow einen Textschatten mit.

h1 {
    font-size: 50pt;
    font-family: sans-serif;
    text-shadow: 10px 11px 12px red;
}

Über die erste Angabe (10px) rutscht der Textschatten nach rechts und über die nächste Angabe (11px) rutscht der Textschatten nach unten. Hier sind auch Minusangaben möglich, somit würde der Textschatten nach links bzw. nach oben rutschen.

Die dritte Angabe (im Beispiel 12px) bestimmt die Härte des Schattens. Je größer dieser Wert ist, desto weicher ist der Schatten. Einfach mal probieren!

Und die letzte Angabe bestimmt die Farbe. Hier in der englischen Schreibweise red. Es kann aber genauso die hexadezimale Schreibweise #ff0000 genutzt werden.

Als Ergebnis bekommen wir dann folgendes Aussehen:

Beispiel für Textschatten mit CSS text-shadow
Beispiel für Textschatten mit CSS text-shadow

Wichtig ist, dass man sich das Ergebnis mit einem mehr oder weniger aktuellen Browser ansieht. Ansonsten wird kein Schatten anzeigt. Sollte auch in einem aktuellen Browser kein Schatten ausgegeben werden, dann hat sich ein Tippfehler eingeschlichen :).

Weicher Schatten

Um den Unterschied, zwischen einem harten Schatten und einem weicheren Schatten zu sehen, geben wir dem dritten Wert 70 Pixel mit (und einen mittleren Wert von 35 Pixel).

Das Ergebnis ist eindeutig weicher:

Beispiel verschiedener Textschatten und Weichzeichnung des Schattens
Beispiel verschiedener Textschatten und Weichzeichnung des Schattens

Obwohl die Farbe immer dieselbe Angabe im CSS hatte (red), wirkt diese sehr unterschiedlich, je nach Härte des Schattens!

Mehrere verschiedene Schatten für 1 Element

Wir können auch mehrere verschiedene Schatten mitgeben. Dazu wird unsere CSS-Anweisung text-shadow erweitert. Wichtig ist, dass die Trennung der einzelnen Schatten über ein KOMMA erfolgt. Im Folgenden wollen wir zu unserem roten rechtsunten Schatten, noch einen weiteren grünen Schatten nach links oben.

Die entsprechende CSS-Anweisung:

h1 {
    font-size: 50pt;
    font-family: sans-serif;
    text-shadow: 10px 11px 12px red,
                 -13px -14px 15px green;
}

Die Ausgabe sollte dann so aussehen:

mehrere Schatten für 1 Element über CSS
mehrere Schatten für 1 Element über CSS

Wichtig ist die Trennung über das Komma. Das wird gerne vergessen. Sollen noch weitere Schatten dazu kommen, dann einfach das nächste Komma und die entsprechenden weiteren Angaben machen:

text-shadow: 10px 11px 12px red,
             -13px -14px 15px green,
             16px -17px 18px blue;

Zum Testen bitte folgende Aufgabe machen.

Aufgabe zu text-shadow: Outline-Schrift erzeugen

Aus einer normalen serifenlosen Schrift, wird die Outline-Schrift über den CSS-Befehl text-shadow erzeugt. Sprich, als Ergebnis wollen wir eine weiße Schrift, mit einer dunkelgrauen Umrahmung haben. Es soll wie in folgernder Grafik aussehen. Viel Spaß beim Nachbauen.

Aufgabe: Outline-Schrift über CSS text-shadow erzeugen
Aufgabe: Outline-Schrift über CSS text-shadow erzeugen

Wer es direkt im Browser ansehen möchte, findet die fertige Lösung unter:
https://www.html-seminar.de/beispielcode/beispiel-css3-text-shadow.htm

Die Psychologie des Schattens

Schatten sollte i.d.R. wie in der Realität eingesetzt werden. Wir sind es gewohnt, dass ein Schatten nach unten fällt. Für die westliche Welt gerne nach rechts unten. Stellt man sich vor, man sitzt vor einem Buch mit einer Leselampe, dann wird der Schatten des Buches nicht in Richtung der Lichtquelle fallen.

Genauso auch bei mehreren Schatten. Fallen diese dann der eine nach rechts oben, der zweite nach links unten und der dritte nach rechts, dann irritiert das. Also immer sachte und logisch bleiben (höchstens man möchte irritieren).