I came across few useful JavaScript libraries, which are very handy to quickly add some jazzy effects on your website. If you ask: Why use a JavaScript library? I can do this in Photoshop! Simple answer is … not everyone knows how to use Photoshop and there is no reason to keep reformatting your graphic just because you want some special effects.
There was a interesting article by Stuart Brown on “8 Web Design Clichés of 2006” which describes the most common clichés you see on the web these days. One thing missing on the list is glass effect, which was inspired by OSX buttons, and now used on many sites and programs.
Here are few JavaScript libraries which you can use without doing any work besides changing your markup a little. They all mainly uses “canvas”, the favorite drawing platform available to javascript.
Gradients
Almost everyone loves gradients. Its very usefull and can make boring color entertainingly catchy in an instant. It can also be used as a fade effect to show a softer separation between two content pieces, like comments or repeated search results.
If your cliental is only Internet Explorer and you just don’t care about the rest of the browsers, you can use “Gradient Filter” from Microsoft which is natively available in Internet Explorer.
For everyone else, Matthew O’Neill wrote an article “Super-Easy Blendy Backgrounds” which explains in great detail on how you can make just a simple PNG and with use of CSS, come up with your own gradients.
If you want to use gradients along with some rounded border effects, you can use “OSGradient” which allows you have a gradient background with rounded borders.
Wet floor effect
Introduced by Apple in many applications. The effect is entertaining because it used gradient mask, which is very non web idea. It also makes a viewer spend more time on a boring photograph because now the user has to waste additional brain cells to understand the wet shiny floor and reflecting image. There is a very cool library called “reflection.js” which allows you to add reflection intently on images with by tagging it with a specific style attribute.
Gel / Glass / Glossy buttons
Introduced by apple and apple.com but you can see it on many websites now a days. In most basic terminology its done thru by adding a dark gradient from bottom to top and then second light colored offset gradient from top to bottom half. Christian Effenberger has written a library called “glossy.js” this allows you to instantly add this effect on images with by tagging it with a specific style attribute.
Rounded / Shaded borders
Also by Christian Effenberger, a library called “corner.js” allows you to round the borders of flat images along with adding inner or outer shadows.
Polaroid frame effect
Latest library called “instant.js” by Christian Effenberger which basically tilts and adds a Polaroid like frame on photographs.
Add A Comment