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 · 16 Kommentare · Kommentar schreiben
Tags: , , , ,
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

«
»

11 Kommentare und 5 Trackbacks 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
    Pingback von Manuel’s Blog » Runde ecken mit CSS
    20. September 2007 um 14:30
  9. 9
    Pingback von FERC v0.1 - Runde Ecken mit JavaScript, CSS und Bildern | Ecken, FERC, Download, Informationen, CSS-Code, PHP-Script, CSS-Codes, Funktionsweise | Florian Eckerstorfer
    20. September 2007 um 17:27
  10. 10
    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?

  11. 11
    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.

  12. 12
    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

  13. 13
    Pingback von Blog.Fritscheweb.de » Blog Archiv » Rundungen
    25. Oktober 2007 um 21:07
  14. 14
    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.

  15. 15
    Pingback von Blog von Soeren Fritsche » Blog Archiv » Navigation
    28. November 2007 um 19:50
  16. 16
    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

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.