Three Green Planets - This is my Homepage
 

Index 3 • Text-Schatten mit CSS3

CSS3 text-shadow

Um einen Schatten auf eine Schrift, Überschrift oder Links zu legen, mußte man früher erst die entsprechenden Bilder im Grafik-Programm herstellen. Mit der CSS3-Anweisung "text-shadow" ist das jetzt einfacher geworden, da man den Schatten (Richtung, Größe und Härte änderbar) direkt über die Anweisung im CSS-Quellcode ausführen kann.

Die Schattenfarbe ist natürlich abhängig von der Textfarbe und der Hintergrundfarbe. Es lassen sich somit auch Einstanz-Effekte und Glüh-Effekte erstellen.

Nachstehend einige Beispiele für den text-shadow-Befehl:

text-shadow: 2px 3px 8px grey;
text-shadow: 1px 1px 3px #6e9c20;
text-shadow: 0px 0px 10px white;

Der erste Wert zeigt die Verschiebung nach rechts an, der zweite die Verschiebung nach unten. Bei negativen Werten (mit einem Minus-Zeichen davor), geht es in die andere Richtung, nämlich nach links und oben.

Der dritte Wert steht für die Härte bzw. Weichheit des Schattens und der letzte Wert ist die Farbangabe.

Im Gegensatz zum box-shadow-Befehl ( siehe hier auf index2.html ) gibt es beim text-shadow keine Präfixe.


Weiter und Info

Beispiel-Verlinkungen

Sie befinden sich auf der Seite index3.html.
Hier geht es zu den Seiten index.html, index2.html, index4.html und index5.html.
Planetarius & Company .:. Team Luna-X1
Space Station Int. Universum
0100111010110 Hole No. 333