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.
|
|
|