Webdesign, Rundungen mit JavaScript

Um Boxen mit abgerundeten Ecken zu erzeugen gibt es die unterschiedlichsten Lösungen im Netz. Eine rechte neue Anwendung ist es, die Rundungen mit Hilfe von JavaScript zu gestallten. Damit kann das Markup, die eventuelle Divitis, wesentlich schlanker ausfallen.

Um Boxen mit abgerundeten Ecken zu erzeugen gibt es die unterschiedlichsten Lösungen im Netz. Eine rechte neue Anwendung ist es, die Rundungen mit Hilfe von JavaScript zu gestallten. Damit kann das Markup, die eventuelle Divitis, wesentlich schlanker ausfallen.

Die Idee klingt vorerst sehr interessant, macht sie doch die Arbeit mein Erstellen des Webdesign wesentlich einfacher und auch die Anpassung in der Zukunft ist gesichert. Leicht ist das Design geändert. Allerdings bringt eine JavaScript-Lösung eine Reihe anderer Aspekte mit sich. Da wären zum Beispiel:

  • die Größe der JavaScript-Datei ist nicht zu unterschätzen,
  • in welchem Verhältnis steht sie zum Aufwand und Ziel,
  • ist die Lösung mit Hilfe von JavaScript browserübergreifend
  • oder gibt es eventuell Unterschiede im Erscheinungsbild ?

Eine ganze Reihe von Punkten, wie ich meine, die ein Rolle bei der Umsetzung des Design spielen.

Eine Umsetzung via Grafik ist recht schlank und mit ein wenig Übung doch recht schnell umgesetzt. Allerdings gibt es auch Anwendungen, in denen ich mir eine Umsetzung via JS als Vorteil vorstellen kann. Beispiel CMS: Eh man dem Kunden ID und class in seinem Content einrichtet und erklärt, könnte man mit Hilfe der JavaScript-Lösung recht einfach und unkompliziert das Ergebnis erzielen.

Mich haben verschiedene Lösungen interessiert und ich habe sie verglichen. Dabei standen drei Lösungen zur Wahl, die ich mit gleichen Anforderungen versehen habe und in einem Testmarkup nun gern zur Verfügung stelle.

  1. JQuery Corner von methvin.com
  2. jQuery RoundCorner Canvas von meerbox.nl
  3. Nifty Corners Cube von html.it

Bildet euch selbst eine Meinung und entscheidet, muss ich oder soll ich.

Demo

Live und in Farbe zu finden in meinen Experimenten: „Rundungen mit JavaScript

Download:



Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als txt-Datei
Download als txt-Datei: border_radius_js.txt - 8 kByte

12 Kommentare

  1. Das ganze wird sowieso bei der nächsten css Version verschwinden und solang benutz ich lieber css um runde Ecken zu erzeugen, auch wenn es mit Hilfe von js einfacherer sein kann.

  2. Zu erwähnen wäre vielleicht, dass afaik alle Lösungen (sicher bin ich mir bei NiftyCube) nur auf einfarbigen Hintergründen brauchbare Ergebnisse liefern. Für Seiten mit Verläufen oder aus (Hintergrund)Bildern sind sie nicht zu gebrauchen.

    Grüße
    Mo

  3. Man muss per CSS anpassen, dann kann es werden. Allerdings sieht es dann bei deaktiviertem JS bescheiden aus.

    Hatte schon lange keinen Kommentar mehr von dir, dachte schon, du bist verschollen. 😉

  4. Ich habe es mal mit "jQuery RoundCorner Canvas von meerbox.nl" versucht.
    Im FiFo und im IE7 sah das bisher ganz gut aus... Nur leider habe ich in IE6 so ein paar sehr unschöne Ecken und Kanten, jemand ne Idee woran das liegen kann?

  5. Hab ich ja gemacht... im IE 7 sieht es auch gut aus... nur IE 6 nicht *grübel* muss ich nochmal genauer suchen.. muss ja behebbar sein 😀

Kommentare sind geschlossen.