Jan 26

Viele Wege führen zu runden Ecken

Tag: Allgemeines,Canvas,Javascript,jQueryPatrick @ 7:23 pm

Nachdem ich vor etlichen Wochen mit Liquid Canvas ein Lösung vorgestellt habe, wie man auf einfache Weise im nachhinein seinen Elementen runde Ecken verpassen kann, ließ mich das Thema seitdem nicht mehr los.

Bei der Suche noch dem besten und ultimativen Ansatz habe ich etliche interessante Projekte ausprobiert.

Vier Lösungsansätze möchte ich hier genauer vorstellen und auf den Einbau und deren Funktionsweise eingehen. Zusätzliche werde ich noch ein paar Alternativen nennen.

jQuery Round Corner

Avinoam Henig stellte auf seiner Homepage mit jQuery Round Corners ein insgesamt ziemlich ausgereiftes jQuery-Plugin zur Verfügung.

Um es nutzen zu können, benötigt man eine jQuery-Version ( die aktuelle Version 1.3(.1)  funktioniert auch! ) und Explorer-Canvas. Beide Skripte müssen zusammen mit dem roundCorner-Skript in den Dateikopf eingebunden werden.

Anschließend bettet man beispielsweise solchen Code wie $(‚#roundCorners‘).roundCorners(„25px“); ein. RoundCorners erzeugt daraus um (beziehungsweise „hinter“) das Element eine Canvas-Grafik mit runden Ecken.

Der Rahmenradius lässt sich für jede Ecke individuell angeben, zum Beispiel .roundCorners(„25px“, 0, „25px“, 0); . Die erste Angabe steht für die linke obere Ecke, weiter folgen rechts oben, rechts unten und links unten.

Angaben zu Rahmenfarbe und – dicke werden entsprechend der CSS-Formatierung des betreffenden Elements angewendet.

Das Ergebnis kann sich insgesamt in allen gängigen Browsern sehen lassen.

Was ich an dieser Umsetzung merkwürdig finde, ist die Veränderung der Element- / Rahmengröße beim Überfahren mit der Maus.

LiquidCanvas

LiquidCanvas von Steffen Rusitschka ist von der Funktionsweise her dem oben genannten RoundCorners sehr ähnlich. Auch hier wird eine Canvas-Grafik verwendet, die das betreffende Element umfasst.

Ebenfalls benötigt LC jQuery und ExCanvas als eingebundene Header-Files. Zusätzlich müssen beide LC-Dateien (liquid-canvas.js und liquid-canvas-plugins.js) eingebunden sein.

Im Gegensatz zu anderen Implementieren lässt sich der Radius der runden Ecken hier nur für alle Ecken allgemein angeben. Dafür bietet LiquidCanvas die Möglichkeit, linieare Farbverläufe als Hintergrund-Füllfarbe zu nutzen.

Ein typischer Aufruf sieht so aus: $(„#liquidCanvas“).liquidCanvas( „[fill{color:#000000} border{color:#dd0000; width:5}] => roundedRect{radius:25}“ );.

Die Farbe und Dicke der Rahmen wird hierbei in dem Aufruf selbst definiert. Das bedeutet aber wiederum, dass man etwaige vorherige Rahmenformatierungen aufheben muss. Dies geht zum Beispiel mit dem Code $(„#liquidCanvas“).css(„border-style“,“none“).

Bei LiquidCanvas fiel mir auf, dass das Skript die padding-Abstände nicht korrekt übernimmt. Hier muss im nachhinein noch Hand an die Elemente gelegt werden, um die Abstände zu korrigieren.

scale9grid

Einen gänzlich anderen Weg geht „Gordon“ mit scale9grid. Dieses orientiert sich an der traditionellen Methode zum Erstellen individueller Rahmen mittels div-Verschachtelungen.

Um scale9grid zu nutzen, benötigt man zum einen jQuery, das Plugin scale9grid und eine (größere) Rahmengrafik, die das Aussehen des zukünftigen Elementrahmens beinhaltet.

Um das betreffende Element werden acht div’s angehangen – für jede Richtung eins – und mit einem Ausschnitt der Rahmengrafikdatei beklebt.

Besonders interessant finde ich die Möglichkeit mit jQuery die Hintergrundgrafik erst kurz vor dem scale9grid-Aufruf hinzu zufügen.

Dies sieht dann beispielsweise so aus: $(‚#scale9grid‘).css(„background-image“,“url(schwarzrot.png)“).scale9Grid({top:30,bottom:30,left:30,right:30});

Die vier Parameter der Methode bestimmen die Schnittpunkte der Grafik. Der Reihe nach: Abstand von oben, von unten, von links und von rechts.

Was mich an dieser Lösung frustriert, sind die Abweichungen von Breite und padding-Angabe. Diese kann man in der Demo gut nachvollziehen.

dd_roundies

Drew Millers Projekt dd_roundies richtet sich speziell an den Internet Explorer (Version 6). Hierbei nutzt die IE-Vektoren-Auszeichnungssprache VML genutzt, um Vektorgrafiken für den IE zu erzeugen, die runde Ecken darstellen (Anmerkung: Explorer Canvas tut das selbe).

dd_roundies benötigt keine anderen (fremden) Skript-Dateien außer die eigene DD_roundies.js.

Mit der Anweisung DD_roundies.addRule(‚#dd_roundies‘, ’25px‘, true); kann beispielsweise ein 25 Pixel breiter Rahmenradius erzeugt werden. Auch hierbei können 4 verschiedene Werte (wie "10px 5px 3px 0" als zweiten Parameter) angegeben werden, um jeder Ecke einen indiviuellen Rahmenradius zuzuweisen.

Millers Skript kann jedoch nicht mit table-Elementen und textarea’s umgehen. Desweiteren gibt es aktuell noch etliche Probleme mit der Beta der 8. IE-Generation.

Für Browser, die von Haus aus Rahmenradius-Eigenschaften css-seitig ( -moz-border-radius, -webkit-border-radius oder das W3C-konforme border-radius ) unterstützen, gibt es den optionalen dritten Parameter, der diese nativen Eigenschaft nutzt.

Opera bleibt bei dieser Lösung jedoch außen vor. Zudem sehen die nativen runden Ecken im Firefox 2 sehr dürftig aus, so dass man hier andere Techniken wählen sollte.

Ansonsten erzeugt dd_roundies eine pixelgenaue Übereinstimmung zwischen Firefox 3, Webkit/Safari 3 und IE6 /7.

Auf meiner eingerichteten Demo-Seite kann jeder sich selbst ein Bild über die erzielten Ergebnisse der einzelnen Lösungen machen.

Alternative (jQuery-) Projekte, die sich auch mit runden Ecken beschäftigen:

Fazit

Die perfekte Lösung gibt es noch nicht.

Grundsätzliche bevorzuge ich, soweit es möglich ist, die nativen CSS-Eigenschaften runde Rahmen um Elemente zu erzeugen.

Für IE und Opera bietet es sich, die Projekte, die mit Canvas arbeiten, genauer anzuschauen und eines davon zu nutzen.

2 Antworten zu “Viele Wege führen zu runden Ecken”

  1. Puh sagt:

    Ich benutze nifty corners und bin damit einigermaßen zufrieden. Einzig dass ich nicht die Größe der Ecken bestimmen kann stört mich etwas, aber zumindest funktioniert es. Noch lieber wäre mir mal eine Lösung ganz ohne Javascript, rein mit PHP oder CSS, damit auch die 20% der Besucher mit abgeschaltetem Javascript runde Ecken zu sehen bekommen.

  2. dop3 sagt:

    Hab noch eins gefunden -> http://css3pie.com/
    Demos auf dieser Website funktionieren im IE stabil.
    Wäre vielleicht auch was zum testen?

    Gruss Michi

  3. chloroquine online sagt:

    generic aralen

    coronavirus from bat soup – chloroquine covid19 – coronavirus antiviral drugs

  4. generic levitra sagt:

    levitra 20mg

    cost of levitra – comprar levitra generico – super active levitra 20mg

  5. cbd heroin addiction sagt:

    cbd gummies

    cbd drops effects – cbd and alcohol – cbd oils

  6. viagra generic sagt:

    viagra 100mg

    viagra and alcoholic drinks e-mail address – genuine viagra viagra gel tabs best price – potenzmittel

  7. cbd oil sagt:

    cbd cream for pain

    cbd tincture 500mg – cbd without thc vape – cbd and thc

  8. viagra for sale sagt:

    viagra

    levitra viagra viagra – viagra v viagra – viagra information viagra vs viagra and currently has

  9. viagra pill sagt:

    sophia viagra hot

    viagra buy uk past 6 months – viagra or viagra which is better – generic viagra prices

  10. generic cialis at walmart sagt:

    cialis coupon

    cialis information patients invitations – cialis 20mg canada new posts – 5mg cialis online uk

  11. cialis over the counter at walmart sagt:

    cialis at walmart

    cialis viagra review – buy cialis online msn messenger – cialis mexico

  12. walmart cialis sagt:

    cialis in walmart

    cheap generic cialis – cheap pill comparison cialis viagra – buy cialis online total topics

  13. tadalafil 5mg sagt:

    tadalafil 20 mg

    cialis viagra levitra compare – cialis professional in london – order cheap cialis no prescription

  14. 10 mg tadalafil generic sagt:

    tadalafil 20mg

    cialis 10mg how long does it last yahoo messenger – does cialis 20mgm act as a laxative – cialis 20mg side effects register

  15. furadantin sagt:

    furadantin

    furadantin

  16. best price for tadalafil 20 mg sagt:

    tadalafil

    tadalafil generic

  17. cialis over the counter at walmart sagt:

    walmart cialis

    walmart cialis

  18. paypal cialis canada sagt:

    paypal cialis canada

    paypal cialis canada

  19. what is sildenafil 100mg sagt:

    what is sildenafil 100mg

    what is sildenafil 100mg

  20. compra online cialis sagt:

    compra online cialis

    compra online cialis

  21. otc viagra 2018 sagt:

    otc viagra 2018

    otc viagra 2018

  22. cialis commercial 2018 sagt:

    cialis commercial 2018

    cialis commercial 2018

  23. order generic cialis from canada sagt:

    order generic cialis from canada

    order generic cialis from canada

  24. amoxicillin with clavulanate potassium sagt:

    amoxicillin with clavulanate potassium

    amoxicillin with clavulanate potassium

  25. amoxicillin with food sagt:

    amoxicillin with food

    amoxicillin with food

  26. cheap zithromax sagt:

    cheap zithromax

    cheap zithromax

  27. best alternative to celebrex sagt:

    best alternative to celebrex

    best alternative to celebrex

  28. can celebrex be takin longterm sagt:

    can celebrex be takin longterm

    can celebrex be takin longterm

  29. cephalexin warnings sagt:

    cephalexin warnings

    cephalexin warnings

  30. cephalexin 500mg dosage for uti sagt:

    cephalexin 500mg dosage for uti

    cephalexin 500mg dosage for uti

  31. cymbalta dosages sagt:

    cymbalta dosages

    cymbalta dosages

  32. what is cymbalta made of sagt:

    what is cymbalta made of

    what is cymbalta made of

  33. sildenafil prices canada sagt:

    sildenafil prices canada

    sildenafil prices canada

  34. cheap generic cialis canada sagt:

    cheap generic cialis canada

    cheap generic cialis canada

  35. buying viagra tablet low cost sagt:

    buying viagra tablet low cost

    buying viagra tablet low cost

  36. cialis dosing sagt:

    cialis dosing

    cialis dosing

  37. cialis timeline sagt:

    cialis timeline

    cialis timeline

  38. viagra triangle sagt:

    viagra triangle

    viagra triangle

  39. keto carbs per day sagt:

    keto carbs per day

    Viele Wege führen zu runden Ecken | Ajaxschmiede.de

  40. foods for keto diet sagt:

    foods for keto diet

    Viele Wege führen zu runden Ecken | Ajaxschmiede.de

Hinterlasse einen Kommentar

You must be logged in to post a comment.