Schatten / Schatteneffekt / box-shadow

Mit Schatten bzw. Schatteneffekten kann man gut einzelne Elemente auf einer Website nach vorne heben. Die Formatierung verschiedener Schatten ist mit CSS3 wirklich einfach geworden. box-shadow:

[horizontale position] [vertikale position] [größe] [farbe];

Definition in CSS:

div.schatten {
-moz-box-shadow:1px 1px 6px #a0a0a0; /* Firefox */
-webkit-box-shadow:1px 1px 6px #a0a0a0; /* Chrome, Safari */
-khtml-box-shadow:1px 1px 6px #a0a0a0; /* Konqueror */
box-shadow:1px 1px 6px #a0a0a0; /* CSS3 */
}

und so schaut's aus:

2-farbige Schatten mit CSS3

Definition in CSS:

div.schatten {
-moz-box-shadow: 1px 1px 3px #44b4dd,-1px -1px 3px #a0a0a0; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #44b4dd, -1px -1px 3px #a0a0a0; /* Chr, Saf */
-khtml-box-shadow: 1px 1px 3px #44b4dd, -1px -1px 3px #a0a0a0; /* Konqueror */
box-shadow: 1px 1px 3px #44b4dd, -1px -1px 3px #a0a0a0; /* CSS3 */
}