Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 16 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
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.
- JQuery Corner von methvin.com
- jQuery RoundCorner Canvas von meerbox.nl
- 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: border_radius_js.txt – 8 kByte
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.
Korrekt, hoffen wir, dass auch die Browser mitmachen.
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
Also ich benutze NiftyCube und das sieht echt klasse aus und ist super einfach einzurichten.
Nifty Corners produziert in meinem FF nur Schrott (Screenshot)
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. 😉
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?
Ja, es muss zusätzlich für IE eine weitere JS-Datei geladen werden, siehe Doku.
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 😀
Zu Doof?
Hab nun einiges Probiert. Im FireFox 2 sieht es super aus, aber ich kriege es nicht hin, dass es im IE genauso aussieht.
Trotz „if IE“ Eintragung, hat jemand eine Idee oder einen Tipp?
Das ganze ist auf der http://www.fritscheweb.de zu sehen.