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 (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-Plugin 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 jQuery 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:
- iPhone
- Chrome
- Firefox
- Safari 2+
- Opera 9.0+
- Internet Explorer 6+
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.
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
Themenverwandte Artikel:
- jQuery: Tipps für Anfänger
- jQuery: Cheat Sheet für Entwickler
- Website-Steuerung per Accesskey bzw. Tastaturkürzel
- jQuery: Eine kleine Tutorial-Sammlung
- Fixe Scrollbar in Firefox mit einer Zeile CSS
Immer auf dem Laufenden mit dem ungekürzten RSS-Feed von Phlow! Freie MP3-Musik aus der globalen Netlabel-Szene liefert unser Phlow-Magazine-Podcast kostenlos!
