Webdesign mit Liquid Canvas

Plug-Ins von Liquid-Canvas

Grundlagen

Die Darstellungseffekte werden bei Liquid-Canvas mit sogenannten Plug-Ins erzeugt. Im Download-Paket von Liquid-Canvas gibt es die Datei liquid-canvas-plugins.js, die bereits eine Reihe von Plugins enthält. Es ist aber auch problemlos möglich, eigene Plug-Ins zu schreiben.

Die einzelnen Plugins haben alle Parameter, die jedoch nicht zwingend benutzt werden müssen. Wenn ein Plugin ohne Parameter benutzt wird, dann wird der Wert der Vorbelegung verwendet.

Die einzelnen Plug-Ins

rect

rect zeichnet einen einfachen rechteckigen Hintergrund.

roundedRect

roundedRect zeichnet einen rechteckigen Hintergrund mit abgerundeten Ecken.

Parameter ist radius:20. Dies entspricht auch der Vorbelegung.

fill

Legt eine gleichmäßige Füllung fest.

Parameter ist color:"Farbcode", z.B. color:"#aaa". Dies entspricht auch der Vorbelegung.

image

Es wird ein Grafik zur Füllung verwendet.

Parameter ist url:"http://www.ruzee.com/files/liquid-canvas-image.png". Dies entspricht auch der Vorbelegung.

gradient

Fläche wird mit einem Farbverlauf gefüllt.

Parameter sind from: "#fff", to:"#666"

shadow

Um die Fläche herum wird ein Schatten gezeichnet.

Parameter sind width:3, color:'#000', shift:2

D.h. es werden Stärke, Farbe und Verschiebungsweite des Schattens festgelegt. Die im Beispiel angegebenen Werte entsprechen der Vorbelegung.

border

Um die Fläche herum wird ein Rahmen gezeichnet.