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)