Schrift und Box mit Schatten
CSS3 bietet eine Eigenschaft 'text-shadow
' um bei einem Buchstaben einen Schatten zu erzeugen. Mit kurzen Definitionen können beeindruckende Effekte erzielt werden.
Weiters bietet CSS3 die Eigenschaft 'box-shadow
'. Damit lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen.
Schrift mit Schatten
Die Schreibweise
.textshadow { text-shadow: 1px 1px 0px #000; /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */ }
Das ist der Beispieltext der mit obigem CSS Code formatiert ist.
Beispiele
Die gezeigten Beispieltexte wurden mit einer erhöten Schriftgröße dargestellt, um den die Effekte deutlicher zu sehen.
#1
Einfacher weicher Schatten:
.textshadow { text-shadow: 3px 3px 3px #000; }
Das ist der Beispieltext der mit obigem CSS Code formatiert ist.
#2
Doppelter Schatten - Darstellung eines Reliefs
.textshadow { text-shadow: 1px 1px #666, -1px -1px #222; }
Das ist der Beispieltext der mit obigem CSS Code formatiert ist.
#3
Mehrfache Schatten zum Umranden der Buchstaben
.textshadow { text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF }
Das ist der Beispieltext der mit obigem CSS Code formatiert ist.
#4
Es ist auch die RGBA-Schreibweise möglich. Somit lassen sich auch transparente Schatten erzeugen.
.textshadow { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }
Das ist der Beispieltext der mit obigem CSS Code formatiert ist.
Box mit Schatten
Die Schreibweise
.boxshadow { -moz-box-shadow: 5px 5px 4px 1px #111; -webkit-box-shadow: 5px 5px 4px 1px #111; box-shadow: 5px 5px 4px 1px #111; /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */ }
weitere Beispiele
Die Beispielboxen werden mit 'div container' mit einer Größe von 100 Pixel im Quadrat gezeigt. Natürlich können auch Fotos oder Grafiken mit Schatten versehen werden.
#1
innerer Schatten
.boxshadow { -moz-box-shadow: inset 0 0 6px #000; -webkit-box-shadow: inset 0 0 6px #000; box-shadow: inset 0 0 6px #000; }
#2
Schatten nur an einer Seite.
.boxshadow { -webkit-box-shadow: 0 12px 6px -6px #000; -moz-box-shadow: 0 12px 6px -6px #000; box-shadow: 0 12px 6px -6px #000 }
Kommentare (0)