“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.

143 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

  2. The following time I learn a weblog, I hope that it doesnt disappoint me as much as this one. I imply, I do know it was my option to learn, however I actually thought youd have something fascinating to say. All I hear is a bunch of whining about something that you can repair when you werent too busy on the lookout for attention.

  3. excellent publish, very informative. I wonder why the opposite experts of this sector don’t
    understand this. You should continue your writing.
    I am sure, you have a huge readers’ base already!

  4. I think everything said was actually very logical. But, think about this, suppose you added a little information? I am not saying your content isn’t solid, however what if you added a title to possibly get people’s attention? I mean is kinda vanilla. You might glance at Yahoo’s home page and note how they write article titles to grab viewers to open the links. You might add a related video or a pic or two to grab readers interested about everything’ve got to say. Just my opinion, it would make your website a little bit more interesting.

  5. Does your website have a contact page? I’m having problems locating
    it but, I’d like to send you an email. I’ve got some creative ideas for your blog you might be interested in hearing.

    Either way, great site and I look forward to seeing it improve over time.

  6. wh0cd241154 [url=http://buymetformin.doctor/]metformin[/url] [url=http://ventolinonline.doctor/]buy ventolin online[/url] [url=http://buyamitriptyline.doctor/]amitriptyline[/url] [url=http://genericcolchicine.doctor/]generic colchicine[/url] [url=http://cheaplasix.doctor/]learn more[/url] [url=http://hyzaar.doctor/]hyzaar[/url]

  7. wh0cd241154 [url=http://tadalafilonline.doctor/]cipla tadalafil[/url] [url=http://buyfurosemide.doctor/]furosemide[/url] [url=http://generichydrochlorothiazide.doctor/]hydrochlorothiazide[/url] [url=http://buynolvadex.doctor/]check this out[/url]

  8. Hi! Someone in my Facebook group shared this site with us so I came to take a look.
    I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers!
    Outstanding blog and wonderful style and design.

Leave a Reply

Your email address will not be published.