Glossy.js 1.3 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
Setting Up
Download "glossy.js" and include it into your webpage.
To make it glossy just add a class="glossy" to the image (minimum dimension: 16x16).
Classes
Initialisation class "glossy"
vary the radius by adding iradius followed by the desired radius in percent
of half of the smaller picture dimension:
Corner radius class "iradius25" - min=20 max=50 default=25
vary the shadow by adding noshadow:
Noshadow class "noshadow" - default=false
vary the background by adding ibgcolor followed by the desired color as hex:
Background color class "ibgcolor" - min=000000 max=ffffff default=0
vary the background by adding igradient followed by the desired color as hex:
Gradient color class "igradient" - min=000000 max=ffffff default=0
vary the color gradient direction by adding horizontal:
Horizontal gradient class "horizontal" - default=false
Demonstration
Shows some of the things "glossy.js" does. 6 images with class = "glossy iradius50"
Empty gif with class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"
3 images with class = "glossy"
Why use Javascript Image Glossy?
Fast and easy to implement. Just add class="glossy" to the image and your good to go.
Don't need to spend time in an image editor creating images with effects.
Works really well with forum avatars. Doesn't require additional server work.
It's dead easy to change the attributes of the images.
Free of charge use on non-commercial and private web sites.
In older browsers, the script degrades and your visitors won't notice a thing.
Restrictions
Opera do not support printing of canvas.
History
Version 1.3
Added support for img attributes: id alt title src onclick
Version 1.2
Added soft shadows for IE
Version 1.1
Added support for Internet Explorer 6/7
Version 1.0
Initial Release
License
Glossy.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only. There is also a Commercial Software License available.
Images used are copyrighted and are used for demonstration only.
