Glossy.js 1.4 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.

CVI-lab: Get a fast impression of the effects and their illustration qualities.

Setting Up

Download "glossy.js" and include it into your webpage.

<script type="text/javascript" src="glossy.js"></script>

Using It

To make it glossy just add a class="glossy" to the image (minimum dimension: 16x16).



If you want flexibility, use "cvi_glossy_lib.js" instead of "glossy.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).柔軟性を望む場合は、「glossy.js」の代わりに「cvi_glossy_lib.js」を使用してください。ユーザ・アクション(例えばイメージがとどまられる場合、1つ以上のオプションを変更して)にイメージを応答させることができます。

Set defaults using Javascript
cvi_glossy.defaultRadius = 25; //INT 20-50 (%)
cvi_glossy.defaultColor = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultColor2 = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultGradient = 'v'; //STR 'd|h|v'-'diagonally|horizontal|vertical'
cvi_glossy.defaultShade = 50; //INT 20-66 (% opacity)
cvi_glossy.defaultShadow = 40; //INT 0-100 (% opacity)
cvi_glossy.defaultNoshadow = false; //BOOLEAN
cvi_glossy.defaultNoradius = false; //BOOLEAN
cvi_glossy.defaultRadius=25; //INT 20-50(%)
cvi_glossy.defaultColor=0; //STR'#000000'-'#ffffff」あるいは0
cvi_glossy.defaultColor2=0; //STR'#000000'-'#ffffff」あるいは0
cvi_glossy.defaultGradient=「v;」; //STR'd|h|v'-'diagonallyに|水平|垂直の'
cvi_glossy.defaultShade=50; //INT 20-66(%不透明)
cvi_glossy.defaultShadow=40; //INT 0-100(%不透明)
cvi_glossy.defaultNoshadow=誤り; //BOOLEAN
cvi_glossy.defaultNoradius=誤り; //BOOLEAN

    Add images using Javascript  
cvi_glossy.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, shadow: value, shade: value, color: value, color2: value, gradient: value, noshadow: value, noradius: value}
cvi_glossy.add(document.getElementById("myimg"), { shadow: 75, shade: 20 });
cvi_glossy.add(document.getElementById(「myimg」)および{影: 75、陰: 20});

Modify images using Javascript
cvi_glossy.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.
cvi_glossy.modify(document.getElementById("myimg"), { radius: 24 });

Remove effect from an image using Javascript


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?

In older browsers, the script degrades and your visitors won't notice a thing.


Opera do not support printing of canvas.


Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.0


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.  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB