CSS Text Shadow

Regulärer Textschatten

p { text-shadow: 1px 1px 1px #000; }

Mehrere Schatten

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

Die ersten beiden Werte geben die Länge des Schattenversatzes an. Der erste Wert gibt den horizontalen Abstand und der zweite den vertikalen Abstand des Schattens an. Der dritte Wert gibt den Weichzeichnungsradius und der letzte Wert die Farbe des Schattens an.

1. Wert = Die X-Koordinate
2. Wert = Die Y-Koordinate
3. Wert = Der Weichzeichnungsradius
4. Wert = Die Farbe des Schattens

Die Verwendung von positiven Zahlen für die ersten beiden Werte führt dazu, dass der Schatten horizontal rechts vom Text platziert wird (erster Wert) und vertikal unter dem Text platziert wird (zweiter Wert).

Der dritte Wert, der Weichzeichnungsradius, ist ein optionaler Wert, der angegeben werden kann, aber nicht muss. Er gibt an, um wie viele Pixel der Text gestreckt wird, was einen Weichzeichnungseffekt hervorruft. Wenn Sie den dritten Wert nicht verwenden, wird er so behandelt, als ob Sie einen Weichzeichnungsradius von Null angegeben hätten.

Denken Sie auch daran, dass Sie RGBA-Werte für die Farbe verwenden können, zum Beispiel eine 40%ige Transparenz von Weiß

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }