トップページ > Ajaxライブラリ使用サンプル集 > Glossyでつややかな立体に
Ajaxライブラリ使用サンプル集
Glossyでつややかな立体に
「glossy.js」を使うと、四角いベタな画像を、簡単につややかな立体的な画像に見せることができる。
下の3つの画像は。
「glossy.js」はドイツの Netzgesta社によるライブラリ。このサイトには他にも面白いライブラリが数多く公開されている。
非営利目的のサイトと個人サイトでは無料ライセンス。ライセンスについての詳細は上記サイトへ。
「glossy.js」をダウンロードし、htmlに読み込ませる
「glossy.js」のページからダウンロードし、<head>部に読み込ませる。
<script src="../js/glossy.js" type="text/javascript"></script> ←自分がjsファイルを置いたパスを書く
画像に「class」で指定する
画像<img>部に「class」で指定する。 16×16ピクセル以上で可能。
<img src="img/glossy2.gif" alt="" width="130" height="50" class="glossy" />
オプションので指定
●角丸の半径の指定（radius）「iradius20(〜50)」を加えると、角丸の半径を変えられる。数値は20〜50まで。デフォルトは25。
<img src="img/glossy3.gif" alt="" width="300" height="26" class="glossy iradius50" />
●ドロップシャドウをやめる（noshadow）
「noshadow」を加えると、ドロップシャドウが消える。
<img src="img/glossy3.gif" alt="" width="300" height="26" class="glossy noshadow" />
●空のイメージに背景色・グラデーションを設定する。グラデーションの向きを変える
空のイメージファイル（透明GIFファイル）に「ibgcolor」や「igradient」を指定すると着色できる。数値は000000〜ffffffの16進方のRGB。
また、「horizontal」で横向きのグラデーションを設定できる。
ここでは8×8ピクセルの透明GIFファイル(empty.gif)を下記のように570×50ピクセルにして配置した。
↓画像名を空欄にする。下は背景色は黒、グラデーションはグリーンに指定した場合。
<img src="img/empty.gif" alt="" width="570" height="50" class="glossy ibgcolor000000 igradient339900" />
↓horizontalを加えてグラデーションの向きを横向きにした場合。シャドウはとってみた。
<img src="img/empty.gif" alt="" width="570" height="50" class="glossy ibgcolor000000 igradient339900 horizontal noshadow" />
<img src="img/empty.gif" alt="" width="570" height="50" class="glossy ibgcolor000000 igradient339900" />
↓horizontalを加えてグラデーションの向きを横向きにした場合。シャドウはとってみた。
<img src="img/empty.gif" alt="" width="570" height="50" class="glossy ibgcolor000000 igradient339900 horizontal noshadow" />