Runde Ecken und Schatten mit CSS 3.0

david.zgoll — Fri, 18 Sep 2009 10:44:34 +0000

Das leidige Thema der runden Ecken und Schatten hat so manchen Webdesigner oder auch Programmierer schlaflose Nächte bereitet. Gerade wenn man den Anspruch hat, den Code möglichst schlank zu halten, musste man hier ungewollte Kompromisse eingehen. Früher musste man mit Bildern und diversen Blockelementen komplexe Verschachtelungen aufbauen, dies gehört nun der Vergangenheit an. CSS 3.0 kann mit einfach anzuwendenden CSS Befehlen Schatten und runde Ecken realisieren. Auch wenn CSS 3.0 noch nicht der Standard ist, können die meisten fortschrittlichen Browser ( Firefox, Safari also Webkit und Geckos, etc.) dies bereits jetzt umsetzen. Leider ist der Internet Explorer 8.0 wie gewohnt seinen Konkurrenten hinterher und kann diese CSS-Deklarationen nicht unterstützen. Er ignoriert sie einfach. Wenn man dies in sein Design einbezieht kann man für die meisten anderen Browser runde Ecken und Schatten aber bereits jetzt einsetzen.

Und so sehen die CSS-Deklarationen aus:
.meine_box {

/* Für die Webkitbrowser */
-webkit-border-radius: 5px;

/* Für die Geckobrowser */
-moz-border-radius: 5px;;

/* Für die KHTML-Browser */
-khtml-border-radius: 5px;

/* Die zukünftige CSS 3.0 Deklaration */
border-radius: 5px;

/* Und hier sind die Deklarationen für die Schatten.
Der erste PX-Wert steht für die Y-Achse, der zweite Wert für die X-Achse und der dritte Wert für die Weichzeichnung des Schattens. Und der letzte Wert ist die Schattenfarbe. */

-webkit-box-shadow: 5px 5px 10px #MeinFarbwert;
-moz-box-shadow: 5px 5px 10px #MeinFarbwert;
box-shadow: 5px 5px 10px #MeinFarbwert;
}

Natürlich ist es auch möglich nur einzelne Ecken anzusprechen, da man ja nicht unbedingt immer überall runde Ecken haben möchte.

Der reguläre Ausdruck, wie er unter CSS 3.0 verwendet wird baut sich wie folgt auf:
border-top-left-radius für die linke obere Ecke
border-top-right-radius für die rechte obere Ecke
border-bottom-left-radius für die linke untere Ecke
border-bottom-right-radius für die rechte untere Ecke

Webkit und KHTML spezifisch setzt man die jeweiligen Bezeichnungen -webkit- oder -khtml- vorweg.

Hier unterscheiden sich die Geckobrowser.
Die -moz- Browser verlangen die Schreibweise wie folgt:
-moz-border-radius-topleft

Und dies kann wie folgt aussehen voodoo-media.de.
Dort haben wir mit runden Ecken und dezenten Schatten gearbeitet.

voodoo-media blog » Design

Runde Ecken und Schatten mit CSS 3.0