Smartr.de

CSS3 als Gestaltungselement - Teil 1

Was haben wir in der Vergangenheit nicht alles an Anstrengungen unternommen, um einfache abgerundete Ecken hinzubekommen. Vierfach geschachtelte divs, riesige Image-Sprites, um tatsächlich auch jede Monitorgröße abzudecken.

CSS3 bietet hier mit der Möglichkeit, Ecken abzurunden eine sehr einfache Lösung an. Doch auch komplexere Rahmen werden in der Zukunft kein Problem mehr sein: mit der CSS3-Option mehrere Hintergrundbilde zu platzieren. Doch dazu später mehr! Zunächst zum Naheliegenden.

Der Code

.rounded-10 {
   border: 1px solid #777;
   background-color: #aaa;
   color: #000;
   padding: 5px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

Das Ergebnis

Inzwischen unterstützen sowohl Gecko (Firefox & Co.), als auch Webkit (Safari, Google Chrome & Co.) die Eckenabrundung per css. Da der entsprechende Standard vom W3C noch nicht verabschiedet wurde, hat der dritte Browser im Bunde, nämlich Opera seine Unterstützung für abgerundete Ecken wieder zurückgenommen.

IE kann es leider gar nicht (diesen Satz werde ich vermutlich noch öfter schreiben). Doch per nicht standardkonformer HTC-Action lässt sich auch dieser dazu überreden, Ecken abzurunden.

In den Browsern

Und so stellen es die aktuellen Browser dar:

Varianten

Damit lässt sich nun bereits einiges in Produktivumgebungen anfangen – nachdem der IE diese Technik noch nicht beherrscht begrenze ich den Einsatz allerdings auf die Formatierung spezieller Absatzformate wie beispielsweise in einer Sitemap. Für den Professionellen Einsatz als Seitenlayoutwerkzeug ist es sicher noch nicht geeignet.

Wie sieht es aber mit der Kombination mehrere Möglichkeiten aus?

Zunächst die Verwendung unterschiedlicher Border-Dicken. Hier stellt Webkit das Ergebnis nicht gut dar und wechselt mitten in der Abrundung abrupt die Rahmenstärke. Firefox 3.6 ist hier sehr gut.

border: 1px solid #777;
border-top: 6px solid #777;

Oder die Verwendung unterschiedlicher Border-Farben. Erzeugt einen witzigen Effekt, der wohl eher selten in der Praxis verwendet werden wird.

border: 6px solid #a00;
border-top: 6px solid #00a;

Oder das Ineinanderschachteln mehrerer Rahmen. Auch hier wieder Renderschwächen bei Webkit, Probleme mit dem Antialiasing

.outer{
   border: 1px solid #888;
   background: #ccc;
   padding-bottom: 20px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}
.inner{
   border: 1px solid #aaa;
   background: #fff;
   border-radius: 9px; /* Radius um 1px reduziert */
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
}

Und schließlich die erweitert angedachten Möglichkeiten, den Radius für jede Ecke individuell festlegen zu können. Diese Technik wird sicher Eingang in die Webdesignpraktiken der nächsten Jahre finden.

border-radius: 20px 5px 0 0;
-moz-border-radius: 20px 5px 0 0;
-webkit-border-radius: 20px 5px 0 0;

.outer{
   border: 1px solid #888;
   background: #ccc;
   padding-bottom: 20px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}
.inner{
   border: 0;
   border-bottom: 1px solid #888;
   background: #fff;
   border-radius: 9px 9px 0 0;
   -webkit-border-radius:  9px 9px 0 0;
   -moz-border-radius:  9px 9px 0 0;
}