Direkt zum Artikelanfang
Magazin für MP3-Musik & Netzkultur

Runde Ecken für Box-Elemente mit jQuery

Schönere Webseiten mit CSS | CSS3 ermöglicht mit ein paar Zeilen CSS-Code runde Ecken für Boxelemente. Die Funktion liebe ich, weil ich damit schnell und unkompliziert Webseiten einen eleganteren Look geben kann. Dazu sind lediglich ein paar Zeilen Code nötig…

Schlagwörter:

runde-ecken-css3

Schönere Webseiten mit CSS | CSS3 ermöglicht mit ein paar Zeilen CSS-Code runde Ecken für Boxelemente. Die Funktion liebe ich, weil ich damit schnell und unkompliziert Webseiten einen eleganteren Look geben kann. Dazu sind lediglich ein paar Zeilen Code nötig (siehe weiter unten). Aber weil das Ganze eine CSS3-Spezifikation ist, funktioniert sie nur in wirklich modernen Browsern: Mozila/Firefox und Safari 3. Ein kleines jQuery- verspricht Abhilfe.

Runde Ecken für Boxelemente mit CSS3

.box-runde-ecken {
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
}

Runde Ecken mit Corners

Wenn man in seine Webseiten Krücken einbaut, sollte man immer vorsichtig sein. Die wichtigste Frage lautet: Ist die Krücke auch abwärtskompatibel? Funktioniert die Webseite auch ohne Javascript? In diesem Falle ja. Laut "Hersteller" funktioniert das Plugin in den folgenden Browsern:

Natürlich kann man auf Runde Ecken verzichten. Mir gefallen abgerundete Elemente aber immer sehr gut, weil den Webseiten-Elementen etwas von ihrer Rechteckigkeit verlieren.

browser-statistiken-feb-09-phlow

Wenn ich mir dann meine Statistiken anschaue, dann könnte sich der Einsatz von jQuery Corners 0.3 evtl. sogar lohnen. Der umständliche Bau von runden Boxen mit Hilfe von Hintergrundgrafiken würde dadurch auf jeden Fall wegfallen. Interessant auch, dass Firefox mittlerweile eine exzellente Verbreitung gefunden hat.

Website: jQuery Corners 0.3

Über den Autor

Phlow-Autor mo. Dieser Artikel wurde am 25.Februar 2009 von mo.. mo. ist Journalist, Buchautor und Webdesigner. Neben dem deutschen Phlow-Magazin betreut er auch die englische Edition unter Phlow-Magazine.com. Der Musikliebhaber lebt und liebt (in) Köln. Weitere Artikel von .

Comments are closed.