平坦な画像をつやつや画像に見せるJavaScriptライブラリ。
今回は、背景色を使ったあれこれに挑戦したいと思います。
[Glossy.js]
http://www.netzgesta.de/glossy/
◆サンプル画像。
今回はこの画像を使用します。
文字以外（背景全て）透過処理しているgif画像です。
（画像がわかりにくいのでborderを入れていますが、それは画像ではありません。）
◆ibgcolor
ibgcolorxxxxxxと[xxxxxx]にカラーコードを指定することで、
画像下の背景色を設定できます。（000000からFFFFFFまで。デフォルトは色なし）
背景色に指定したのは黄色■（#FCFF00）です
[class="glossy ibgcolorFCFF00"]
画像が透過されているので、指定した背景色が表示されます。
逆に文字だけを透過させた画像なら、文字色が指定色になります。
同じ画像で背景色を青緑■（#00DDBB）に変更します。
色によって全然印象がかわるものですね。
◆igradient
igradientxxxxxxと[xxxxxx]にカラーコードを指定することで、
陰影をつけるための色（グラデーションカラーの一番濃い部分）を設定できます。
（000000からFFFFFFまで。デフォルトは色なし）
背景色に白を指定し、グラデーションに紫■（#54FBFF）を指定しました。
[class="glossy ibgcolorFFFFFF igradientBB00BB"]
こちらも透過された部分にしか反映されません。
また、ibgcolorのみの指定はできましたが、igradientのみの指定はできませんでした。
※カラーコードの指定は大文字でも小文字でもOKでした。
◆horizontal
グラデーション効果を上下ではなく左右につけることができます。
背景：■ グラデーション：■
[class="glossy ibgcolor00FFFF igradient110099 horizontal"]
◆ibgcolorとigradientの効果
ibgcolorとigradientの効果を使うと、おもしろいことができます。
←この画像を使います。
（画像がわかりにくいのでborderを入れていますが、それは画像ではありません。）
この画像（8px＊8pxの透過部分しかないgif画像）を使えば、
いろんなサイズのつやつや画像を作ることができるのです。
背景：■ グラデーション：■
<img src='xxxx/space.gif' alt='space' width='80' height='80' class='glossy ibgcolorFFBB33 igradientFF7722' />
単純に表示サイズを好きに設定し、背景色とグラデーションを指定するだけ。
画像を自分で作るよりもはるかに簡単です。
画像のサイズも大きくならないし。
（ローカルで作ってキャプチャして画像にするというのはナシ・・・かな・・・）
ちなみに適用できる画像の（表示する）最小サイズは16px＊16pxです。
おもしろいくらいに効果がでるこのスクリプト、とても良いです。