画像を立体的にするエフェクトJavaScript （Glossy.js）

イメージを簡単に立体的にすることができるエフェクトJavaScriptがGlossy.js。つやつやの立体的なボタンのようなデザインになる。エフェクトを適用できる画像の最小サイズは16x16ピクセル。

内部的にはCanvasを利用している。実際に導入するにはHTMLヘッダでGlossy.jsを呼び出しておく。グロスエフェクトを適用したいイメージタグに class="glossy" を記述すれば適用される。

表示オプションはclassに記述
Glossy.jsの適用と、オプションの指定はすべて<img class=".."に追加すればよい。デフォルトの状態から、ドロップシャドウなどをなくしたい場合等に指定できる。

Firefox、Opera、Safariの最新版で問題なく利用することが出来る。但し、InternetExplorerではVML仕様となっているため、若干エフェクト適用後のデザインが異なる場合がある。

Canvas又はVMLが利用できないブラウザ環境では利用することができないので、注意していただきたい。表示の際に、若干もたつく印象があるがいろいろな場面で利用できそうなので、是非試していただきたい。