Nov 29
Runde Ecken ganz einfach mit Liquid Canvas
Steffen Rusitschka veröffentliche vor wenigen Tagen die sehr gelungene Mini-Javascriptbibliothek Liquid Canvas zum Erzeugen perfekter runder Ecken an beliebigen HTML-Elementen.
Die Rundungen werden zur Laufzeit über Canvas generiert und automatisch in den HTML-Code eingebettet. Der Einsatz von herkömmlichen Bildbearbeitungsprogrammen wie Gimp, Inkscape oder Photoshop entfällt völlig.
Die Features im Einzelnen:
- automatisches Erzeugen von HTML-Canvas-Elementen, die sich der Größe des HTML-Elements anpassen
- Canvas-Abstraktion – jedes HTML-Element erhält eine paint-Methode
- Plugins zum Rendern können verwendet werden
- etliche Plugins existieren bereits, eigene können ebenso eingebunden werden
- vereinfachte Render-Sprache für Plugin basiertes Rendern
- an CSS angelehnte Syntax der Render-Sprache für die plugin-Formatierung
- nutzt nur HTML, Canvas, jQuery und exCanvas
- funktioniert mit Firefox (2+), Internet Explorer (6+), Safari (3+), Chrome
Ähnliche Themen im Blog:
Dezember 30th, 2008 at 10:46 am
Interessanter Ansatz im der Rendering-Sprache. Ich habe mit jQuery background canvas einen reinen jQuery Ansatz verfolgt. Siehe: http://www.maierhofer.de/BackgroundCanvas.htm. Damit kann man an Grafiken alles bauen, was man im background haben will. Also auch komplexe Strukturen wie Tabs.
Gruß Tom
Januar 16th, 2009 at 2:32 pm
Nachträglich vielen Dank für deinen Kommentar und den Hinweis auf deine Lösung. Ich hab mir dein Plugin auch näher angeschaut und lokal getestet.
Es wird in den nächsten Tagen ein Beitrag zum Thema „runde Ecken“ in Web-Anwendungen geben. Dabei werden speziell jQuery-Plugins betrachtet und Vor- und Nachteile der jeweiligen Lösung (aus meiner Sicht) vorgestellt. Es wird dazu auch etliche Beispiele und/oder Bilder geben.
Januar 26th, 2009 at 11:43 pm
[…] ich vor etlichen Wochen mit Liquid Canvas ein Lösung vorgestellt habe, wie man auf einfache Weise im nachhinein seinen Elementen runde Ecken […]