Sidebar
ein-/ausblenden

Webdesign, Rundungen mit JavaScript

Plugin für WordPress SEO

Anzeige

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

Artikel #511, 18. September 2007 · CSS, xHTML, JS, Webküche · 12 Kommentare
Tags: , , , ,
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

«
»

11 Kommentare zu „Webdesign, Rundungen mit JavaScript“

  1. 1
    Kommentar von Ralf
    18. September 2007 um 22:49

    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. 2
    Kommentar von Frank Bültge
    18. September 2007 um 23:40

    Korrekt, hoffen wir, dass auch die Browser mitmachen.

  3. 3
    Kommentar von Mo
    19. September 2007 um 08:57

    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

  4. 4
    Pingback von Basic Thinking Blog | abgerundete Boxen mit JavaScript
    19. September 2007 um 11:47
  5. 5
    Kommentar von Moritz
    19. September 2007 um 15:24

    Also ich benutze NiftyCube und das sieht echt klasse aus und ist super einfach einzurichten.

  6. 6
    Kommentar von Ralf
    19. September 2007 um 19:52

    Nifty Corners produziert in meinem FF nur Schrott (Screenshot)

  7. 7
    Kommentar von Frank Bültge
    19. September 2007 um 21:15

    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. ;-)

  8. 8
    Kommentar von Soeren
    1. Oktober 2007 um 10:08

    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?

  9. 9
    Kommentar von Frank Bültge
    1. Oktober 2007 um 14:51

    Ja, es muss zusätzlich für IE eine weitere JS-Datei geladen werden, siehe Doku.

  10. 10
    Kommentar von Soeren
    1. Oktober 2007 um 15:01

    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 :D

  11. 11
    Kommentar von Soeren
    26. Oktober 2007 um 08:55

    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.

  12. 12
    Kommentar von Webdesign Wien
    5. Mai 2010 um 23:11

    Interessant, aber ich schließe mich der Meinung von Ralf an: Da warte ich doch lieber auf CSS3 oder verwende Hintergrundgrafiken wenn ein Lunde unbedingt abgerundete Ecken haben will.

    mfg
    Joe

Kommentare sind geschlossen.