“Runde Ecken” und Schlagschatten mit CSS3

Langsam aber doch wächst die Unterstützung für die neuen Features, die CSS3 bringen wird. Immer mehr Browser unterstützen in ihrer aktuellsten Version einige Teile der CSS3-Spezifikation, die noch nicht vom W3C abgesegnet wurde.

Browserspezifische Erweiterungen

Die Hersteller können browserspezifische Erweiterungen vornehmen, indem sie die Eigenschaften mit einem Präfix versehen. Die folgende Tabelle zeigt die Präfixe der gängigen Browser:

Browser müssen CSS-Eigenschaften, die sie nicht verstehen, ignorieren. Viele Hersteller verwenden deshalb Präfixe, um einen Teil der CSS3-Features schon jetzt zu unterstützen.

“Runde Ecken”

Mit CSS3 können “runde Ecken” realisiert werden, ohne das HTML-Markup zu beeinflussen. Die dafür notwendige Eigenschaft heißt border-radius. Unterstützt wird diese Eigenschaft bisher von Firefox (-moz-border-radius), Webkit-basierten Browsern wie Google Chrome oder Safari (-webkit-border-radius) und Konqueror (-khtml-border-radius).

Ein Element kann so ganz einfach mit runden Ecken versehen werden:

#myBox {
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Um nur eine der Ecken abzurunden, definiert CSS3 die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius. Firefox schert an dieser Stelle aus: -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright und -moz-border-radius-bottomleft.

#myBox {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

Schlagschatten

Mit CSS3 kann eine Box mit Schlagschatten versehen werden. Dafür gibt es die Eigenschaft box-shadow:

#myBox {
    -webkit-box-shadow: 10px 10px 5px #cefa42;
    -moz-box-shadow: 10px 10px 5px #cefa42;
    box-shadow: 10px 10px 5px #cefa42;
}

Diese CSS-Eigenschaft benötigt 4 Angaben:

• Die ersten zwei Angaben bestimmen den horizontalen und vertikalen Offset des Schlagschattens. Positive Werte bedeuten, dass der Schatten rechts oder oben der Boxen positioniert wird, negative Werte positionieren den Schatten links bzw. unter der Box.
• Die dritte Angaben definiert, wie scharf der Schatten dargestellt werden soll. Je höher der Wert, desto verschwommer stellt der Browser den Schatten dar. Negative Werte sind an dieser Stelle nicht erlaubt.
• Der letzte Parameter gibt die Farbe des Schattens an.

Und was ist mit dem IE?

Der Internet Explorer unterstützt selbst in der Version 8 keine der oben genannten CSS3-Features. Auch die aktuelle Version von Opera bietet keine Unterstützung für diese Effekte.

Wenn man damit leben kann, dass Benutzer fortschrittlicher Browser ein schöneres Layout sehen als die Benutzer des Internet Explorers oder des Opera-Browsers, kann man die oben genannten CSS3-Features ohne Probleme nutzen. Will man Boxen mit Schlagschatten haben und darf der Schatten ruhig eine scharfe Begrenzung haben, kann man eine Microsoft-proprietären Filter einsetzen:

#myBox {
    -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=2, offy=2)";
    filter:progid:DXImageTransform.Microsoft.DropShadow(color=#333333, offx=2, offy=2);
}

Internet Explorer-Versionen vor 8 verstehen nur die untere Zeile. Ab IE 8 sollte der Filter mit dem herstellerspezifischen Präfix versehen werden. Dann muss der Wert in Anführungszeichen stehen.

Hier gibt’s ein Beispiel für diese Technik.

Die Box sieht in Firefox 3.5.2 so aus:

Und so sieht die gleiche Box im Internet Explorer 8 aus:

Wenn auch das keine Option ist, bleiben nur mehr die konventiellen Methoden für “runde Ecken” und Schlagschatten.