Neues von CSS3 und abgerundeten Ecken

Author: Markus René Einicher Veröffentlicht: on Saturday 20. March 2010 at 07:19 Updated: on Saturday 22. May 2010 at 16:02 Categories: CSS Tags: Comments: 1 - Post a Comment Trackbacks: 0 - Trackback URL

Am neuen Standard für CSS3 wird ja im W3C schon eine ganze Weile entwickelt und immer mal wieder gibt es Auszüge aus dem aktuellen Stand der Entwicklung, so genannte "Working Drafts" oder frei übersetzt "Arbeitspapiere".

Ein Solches hat die CSS Workgroup gestern bezüglich CSS3 veröffentlicht. Die neue CSS-Version lässt ja seit sie diskutiert wird die Herzen der Websetzer hoch gehen, so auch Meines das gerade im neuen Draft von den angepeilten Fähigkeiten der abgerundeten Ecken angetan ist.

Firefox kann ja mit -moz-border-radius bereits runde Ecken darstellen, dank der neuen Render-Engine werden die jetzt auch schön glatt angezeigt, und nicht mehr so angenagt (pixelig) wie noch im FF2. Im Moment kann man zum Beispiel mit -moz-border-radius: 10px 5px 9px 7px eine Box mit vier runden Ecken definieren, wo jede runde Ecke somit einen anderen Radius erhält, also die Rundungen unterschiedlich groß werden.

Die CSS-WG geht jetzt aber noch einen Schritt weiter: Sie will es nicht nur ermöglichen jede der vier Ecken einer Box unterschiedlich abzurunden, jede Abrundung selbst soll zusätzlich noch die Möglichkeit erhalten unterschiedlich hoch und breit zu sein. Dadurch kann die Rundung der Ecke nicht nur mehr ein exakter Kreis mit dem angegebenen Radius sein, sondern auch gedehnt oder gestaucht wirken, also elliptisch:

Welche neuen Möglichkeiten sich dadurch auftun zeigen folgende grafischen Beispiele aus dem besagten Draft:

Und hier noch der Link zum Working Draft: http://www.w3.org/TR/css3-background/#the-border-radius

Nachtrag 20.03.2010
Webkit kann über -webkit-border-radius auch schon längst runde Ecken darstellen und damit Safari4 und Google Chrome. IE und Opera: im Moment noch keine Chance.