jQuery Back­ground Can­vas Plu­gin

The jQuery back­ground can­vas plugin brings 2D draw­ing ca­pa­bil­i­ties into CSS web de­sign. It can be used to draw a div with a back­ground gra­di­ent, a bor­der with round cor­ners, or CSS floated tabs and all what you can draw on a can­vas. The jQuery back­ground can­vas plugin is pure JavaScript and don't use any bit­map.

Demo of Gra­di­ents, Rounded Corners with­out CSS and Tabs

This web­site is build with the jQuery back­ground can­vas plugin. The rib­bon on the top has rounded cor­ners, a gra­di­ent back­ground and tabs. All these el­e­ments are drawn on the back­ground can­vas. No im­ages or CSS trick­ery is used. You can take a glance on the source code. It is clean, no lay­out ta­bles, no lay­out Divs, no CSS tricks.

Back­ground can­vas is not a CSS lay­out re­place­ment

Dis­cus­sion about CSS and JavaScript? Use both, and get a sec­tion 508 com­pli­ant and search en­gine friendly re­sult. To clut­ter html markup with lay­out div's to get round cor­ners, gra­di­ents or what­ever is waste of time. It is bet­ter to have a clean markup (retro cod­ing) and pol­ish the re­sult with JavaScript. But the fall­back must work! The search en­gine (Google) and the blind user wants a clean html markup! The user with CSS en­abled browsers wants a nice CSS lay­out. And last but not least the user with JavaScript en­abled wants a per­fect de­sign at all.

Links and Down­loads

Bi­nar­ies

Doc­u­men­ta­tion

Pro­ject Host­ing on CodePlex