Vorteile der CSS3-Lösung für Schatten und runde Ecken

Abgerundete Ecken ganz klassisch

Für abgerundete Ecken oder Schatten um Boxen musste Sie früher zu Grafiken greifen.

Zum Beispiel für abgerundete Ecken: Sollte die Box flexibel sein, das heißt sich in Breite und Höhe an den Inhalt anpassen, brauchte man vier Grafiken. Diese vier Bilder wurden als CSS-Hintergrundbilder eingesetzt und vier HTML-Elementen zugewiesen.

Diese Lösung hat jedoch mehrere Nachteile:

Jedes Bild, das geladen werden muss, muss einzeln vom Server angefordert werden. Diesen Vorgang nennt man auch HTTP-Request. Und je mehr solcher HTTP-Requests es gibt, desto langsamer und weniger performant ist eine Webseite.
Die Erstellung ist mühsam. Sie müssen zuerst die Bilder erzeugen und danach brauchen Sie auch die entsprechenden HTML-Elemente, denen Sie sie zuzuweisen können. Eventuell müssen Sie div-Elemente ergänzen, die Sie sonst nicht bräuchten.
Die Wartung ist aufwändig. Soll eine Ecke weniger oder mehr abgerundet werden, müssen Sie die entsprechenden Bilder erstellen.

Die klassische Methode

Wie die klassische Methode zur Erstellung von Boxen mit abgerundeten Ecken aussieht, finden Sie beispielsweise unter http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken.

Einfacher und besser geht das mit CSS3. Für runde Ecken gibt es die Eigenschaft border-radius, bei der Sie einfach den Grad der Rundung angeben.

Klassische Schatten

Ganz ähnlich aufwändig ist auch die Erstellung von Schatten um Boxen mit CSS 2.1. Auch hier müssen Sie zu CSS-Tricks greifen, die besonders komplex werden, wenn der Schatten auch noch verschwommen sein soll.

Ein Artikel unter http://www.thestyleworks.de/tut-art/shadow.shtml erläutert, wie man das mit den Mitteln von CSS 2.1. realisieren kann.

Und auch hier gibt es dank CSS3 eine Vereinfachung in Form der Eigenschaft box-shadow.

Abgerundete Ecken und Schatten mit CSS3