Du bist hier: bueltge.de » test »

Rundungen mit JavaScript auf Basis jQuery

Dieses ist lediglich ein Testmarkup zum Darstellen von Rundungen mit Hilfe der JavaScript-Library jQuery und Libraries ohne Basis-Library.
Eine kleine Spielerei von Frank Bueltge um Alternativen aufzuzeigen und zu sehen, was geht und welche Lösung wirklich funktioniert.

Der Beitrag zur dieser Demo ist im Artikel „Webdesign, Rundungen mit JavaScript“ zu finden.

JQuery Corner von methvin.com

Diese Lösung ist 6kByte groß und ist in vielen Browsern verfügbar.
Vorteil: Kleine Lösung und Browserübergreifend mit vielen verschiedenen Arten für Border.

JQuery Corner h3

  1. ol li
  2. Test 2
  3. Test 3
  4. Test 4

JQuery Corner h3

jQuery RoundCorner Canvas von meerbox.nl

Diese Lösung ist 4kByte groß und ist nicht im IE und Opera verfügbar. Allerdings gibt es eine weiter 8kByte große Datei, die die Funktionsweise auch in den beiden Browsern umsetzt.
Vorteil: Die Qualität des Radius ist besser. Border werden übernommen, siehe h3-Überschrift. Anwendung auf li-Elemente möglich.

jquery-roundcorners-canvas h3

  1. ol li
  2. Test 2
  3. Test 3
  4. Test 4

jquery-roundcorners-canvas h3

Unbendingt im IE ansehen. Die Probleme mit den feinen Border-Linien kann man entfernen, in dem man dem Element eine Border per CSS definiert, gleiche Farbe wie der Hintergrund, siehe rote h3.

Rundungen mit JavaScript ohne Basis-Library

Nifty Corners Cube von html.it

Diese Lösung ist 8kByte groß und zeigt unterschiedliche Ergebnisse in unterschiedlichen Browsern. Die Lösung ist sehr schlank und benötigt ein 1kByte großes CSS-Stylesheet, auf welches das JavaScript zugreift.
Vorteil: Sehr kleine Library.

Nifty Corners Cube h3

  1. ol li
  2. Test 2
  3. Test 3
  4. Test 4

Nifty Corners Cube h3

DD_roundies von rew Diller

Diese Lösung ist 3kByte groß (gepacktes JS) und zeigt in unterschiedlichen Browsern gute Ergebnisse. Die Lösung ist sehr schlank und benötigt kein CSS-Stylesheet oder Bilder, auf welches das JavaScript zugreift.
Vorteil: Sehr kleine Library, keine Bilder, kein extra CSS.

Nifty Corners Cube h3

  1. ol li
  2. Test 2
  3. Test 3
  4. Test 4

Nifty Corners Cube h3


Abschließend ist sicher zu sagen, dass alle Lösungen Unterschiede aufzeigen und man je nach Einsatz abwegen muss. Um Tabs mit Rundungen zu erzeugen, ist display: inline - Variante nicht einfach umsetzbar. Erstellt man die horizontale-Tab-Variante aber mit Floats, so kann auch dort die Rundung via JS angewandt werden.

Natürlich kann man eine ganze Reihe weiterer Lösungen nutzen um ein entsprechend anschauliches Design zu erstellen, aber die Lösung soll grundsätzlich sein und leicht nachvollziehbar.

Wie man es macht. Beispiel downloaden und JavaScript-Library jQuery incl. der Plugins einbinden. Der Code sollte leicht verständlich sein. Ansonsten gibt es einige Infos dazu im zugehörigen Beitrag.

Download: border_radius_js.txt