Jan 26
Viele Wege führen zu runden Ecken
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.
August 25th, 2022 at 5:25 am
christian dating https://lavaonlinedating.com/
August 25th, 2022 at 7:03 am
dating online https://freeadultdatingpasses.com/
August 25th, 2022 at 9:46 am
europe online dating https://virtual-online-dating-service.com/
August 25th, 2022 at 12:44 pm
plenty of fish dating site https://zonlinedating.com/
August 25th, 2022 at 2:50 pm
website dating service https://onlinedatingservicesecrets.com/
September 2nd, 2022 at 10:19 pm
gay boy chat rooms https://newgaychat.com/
September 3rd, 2022 at 2:05 am
gay furry chat one on one https://gaychatcams.net/
September 3rd, 2022 at 6:52 am
chat gay las vegas https://gaychatspots.com/
September 3rd, 2022 at 3:08 pm
m4m chat phone free rochester ny gay https://gay-live-chat.net/
September 3rd, 2022 at 9:05 pm
gay couple on chat video https://chatcongays.com/
September 3rd, 2022 at 11:05 pm
gay web chat https://gayphillychat.com/
September 4th, 2022 at 6:21 am
gay chat rouletter https://gaychatnorules.com/
September 4th, 2022 at 10:32 am
bears.com official website gay chat room https://gaymusclechatrooms.com/
September 4th, 2022 at 4:04 pm
ontario calif gay chat room https://free-gay-sex-chat.com/
September 4th, 2022 at 9:48 pm
gay jerk off chat https://gayinteracialchat.com/
Oktober 20th, 2022 at 2:31 pm
gay live chat rochester video https://gaymanchatrooms.com/
Januar 26th, 2023 at 11:17 am
1cognizant
April 9th, 2023 at 7:50 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://www.nybc.tw/post/723?page=2
Juni 8th, 2023 at 10:46 am
canlı sex hattı
thank you for publish post :
August 25th, 2023 at 5:56 pm
izmir escort
izmir escort sitesi gururlar sunar.
September 3rd, 2023 at 5:55 am
child porn
best porn web site click and go watch porn.
September 28th, 2023 at 4:53 am
xxlargeseodigi
xxlargeseodigi seo hizmetleri
Oktober 13th, 2023 at 9:47 pm
bağcılar escort
bağcılar escort sitesi ile bağcılar escort bayanlar burada.
Oktober 27th, 2023 at 5:25 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
http://sahagunyviciana.com/2016/10/25/la-obligacion-de-relacionarse-a-traves-de-medios-electronicos-con-las-administraciones-publicas-a-partir-del-2-de-octubre-de-2016/
November 10th, 2023 at 6:30 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://orionbilisim.net/index.php/component/k2/item/4-how-to-create-contents-get-traffic?start=740
Dezember 5th, 2023 at 2:35 pm
çeşme transfer
çeşme transfer
Februar 26th, 2024 at 2:47 am
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://www.empireseguros.com.br/empire-seguros/2019/02/12/animais-de-estimacao-tambem-podem-melhorar-a-nossa-saude-fisica/
März 1st, 2024 at 3:20 am
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://www.celalyurtcu.com/etiket/oyuncu-kasasi
März 11th, 2024 at 9:34 am
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://www.modellismopiu.net/m gallerie/main.php?g2_view=core.UserAdmin
März 14th, 2024 at 12:31 pm
yasam ayavefe
yasam ayavefe
März 26th, 2024 at 6:23 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://tjmr.org/2020/05/22/status-and-efficacy-of-sacrifice-in-ancient-israel/
März 27th, 2024 at 11:11 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://journees-ecologistes.fr/2021/05/31/untitled/
April 5th, 2024 at 4:51 am
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
http://mountainviewhostel.com/2015/06/12/benefits-of-travelling-as-a-family/
Mai 16th, 2024 at 10:36 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
http://xaynhahanoi.com.vn/dich-vu-xay-dung-nha-tron-goi/
Mai 17th, 2024 at 6:24 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://evansgrafx.com/img_1371/
Mai 23rd, 2024 at 10:52 am
jojobet twitter
jojobet twitter
Juni 11th, 2024 at 4:45 am
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://hultin.cc/2008/12
Juni 11th, 2024 at 10:10 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
http://globalskyafricaonline.com/national/celebrities-politicians-have-zero-influence-on-citizens-ben-ephson/
Juni 14th, 2024 at 8:37 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://inifixme.com/terus-gencar-pasar-redmi-note-6-pro-bawa-4-kamera/
Juni 14th, 2024 at 8:39 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://gostica.com/spiritual-growth/7-reasons-spiritual-awakening-come-sudden-stop/comment-page-49/
Juni 30th, 2024 at 4:02 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
http://157.245.224.202/list-top-websites-like-ertehaber.com
Juli 10th, 2024 at 12:15 pm
Viele Wege führen zu runden Ecken | Ajaxschmiede.de
https://accueil-rive.fr/sortie-patinoire/