Tips und Tricks rund ums Webdesign

css: box-shadow

Ein neues Feature seit CSS3 ist das sogenannte box-shadow. Mit diesem Befehl bringt man den Browser dazu einen schatten um ein Objekt wie ein DIV zu legen. Damit würd es überflüssig mit Grafikprogrammen Standardshatten zu setzen. Vorteile sind das alle Schatten gleich gestalltet werden können und das die Bilder in der Größe kleiner werden. 

Syntaxbeispiel:

.boxbeispiel {

        width:300px;

        height:100px;

        background-color:#024a9c;

        box-shadow: #000 2px 2px 2px;

}

#000 wäre die Schattenfarbe die erste Pixelangebe gibt die Schattenbreite an, die zweite Pixelangabe (auch negative Zahlen möglich) den Schattenabstand (auch negative Zahlen möglich) und die dritte Pixelangabe den Blur-Effekt.

Beispiel für shadow-box:

Der Nachteil liegt mal wieder beim Internet Explorer, er kann dieses Effekt z. Z. nicht darstellen. Ich würde mir wünschen wenn Microsoft da nachbessern würde.