“Runde Ecken” und Schlagschatten mit CSS3

Standard

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:

Präfix Browser Beispiel
-khtml- Konqueror -khtml-border-radius
-moz- Gecko-basierte Browser, z.B. Firefox -moz-box-shadow
-ms- Internet Explorer -ms-filter
-o- Opera -o-background-size
-webkit- Webkit-basierte Browser, z.B. Google Chrome oder Safari -webkit-border-radius

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:

2009-08-16-box-in-firefox-3.5

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

2009-08-16-box-in-ie-8

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

10 thoughts on ““Runde Ecken” und Schlagschatten mit CSS3

  1. Definitely imagine that that you stated. Your favourite justification seemed to be at the net the simplest thing to remember of.
    I say to you, I definitely get irked whilst other
    folks consider worries that they plainly do
    not realize about. You managed to hit the nail upon the highest and also outlined out
    the whole thing without having side effect , other people can take a signal.

    Will probably be again to get more. Thanks

Leave a Reply

Your email address will not be published.