jQu­e­ry Back­ground Can­vas Plu­gin

Der jQu­e­ry Back­grund Can­vas Plu­gin er­mög­lich es CSS Lay­outs mit­tels Ja­vaS­cript an­spre­chen­der zu ge­stal­ten. Spe­zi­ell bei DIVs mit Farb­ver­läu­fen, Rah­men mit run­den Ecken, oder CSS Tabs kann das CSS Lay­out oh­ne viel Auf­wand ver­bes­sert wer­den. Der jQu­e­ry Back­grund Can­vas Plu­gin nutzt rei­nes Ja­vaS­cript und ver­wen­det kei­ne Bil­der.

Farb­ver­läu­fe, run­de Rah­men und Tabs

Die­se Web­sei­te ist mit dem jQu­e­ry Back­ground Can­vas Plu­gin ge­stal­tet. Der Rib­bon oben hat run­de Ecken, einen Farb­ver­lauf im Hin­ter­grund und Rei­ter. Die­se Ele­men­te wur­den mit dem Back­ground Can­vas ge­zeich­net und ver­wen­den kei­ne Bil­der, Lay­out Ta­bel­len oder CSS Tricks. Wenn man den Quell­co­de der Sei­te be­trach­tet, sieht man dass kei­ne Lay­out Ta­bel­len, Lay­out DIVs, CSS Tricks oder Bil­der be­nutzt wur­den.

Der Back­ground Can­vas ist kein CSS Er­satz!

Ja­vaS­cript oder doch bes­ser rei­nes CSS? Mit dem Back­ground Can­vas Plu­gin er­hält man das Bes­te aus bei­den Wel­ten. Ein sau­be­res HTML oh­ne die Lay­ou­ting Ta­bel­len oder Divs, die sonst üb­lich sind. Ein ein­wand­frei­es CSS Lay­out oh­ne Tricks und Tipps. Und dann al­le net­ten Fea­tu­res wie Farb­ver­läu­fe und Rah­men mit run­den Ecken die man Heu­te ger­ne hat.

In­ter­essant an die­sem Auf­bau ist, dass dies auch gleich­zei­tig ei­ne Fall­back In­fra­struk­tur bie­tet. Ist Ja­vaS­cript nicht ver­füg­bar, bleibt ein ein­wand­frei­es CSS Lay­out. Ist auch CSS nicht ver­füg­bar, bleibt ein ein­wand­frei les­ba­res HTML.

Mit die­ser Tech­nik ist es im ü­b­ri­gen auch kein Pro­blem ein bar­rie­re­frei­es Web De­sign zu er­zeu­gen oh­ne auf ein Top Lay­out ver­zich­ten zu müs­sen. Da we­der beim HTML noch beim CSS Lay­ou­ting Tricks an­ge­wen­det wer­den müs­sen (Um z.B. klei­ne Gra­fi­ken für run­de Ecken zu po­si­tio­nie­ren), kann man sich voll auf die Bar­rie­re­frei­heit kon­zen­trie­ren. Das mö­gen im ü­b­ri­gen auch die Such­ma­schi­nen, ins­be­son­de­re Goo­gle.

Links und Dow­n­loads

Bi­na­ri­es

Do­cu­men­ta­ti­on

Pro­jekt auf Co­dePlex