最近よく目にする、つやつやした画像。
(Web2.0風画像、というのでしょうか。)
グラデーションなどの効果を使い、自分で作成するのはなかなか大変です。
Glossy.js は、平坦な画像をつやつや画像に見せるJavaScriptライブラリです。
[Glossy.js]
http://www.netzgesta.de/glossy/
※配布先はLoupe.jsと同じところです。
[netzgesta.de](ドイツです)
http://www.netzgesta.de/
ホームページを読むと、なにやらソフトウェア特許でもめている?のでしょうか。
ここのサイトには他にも面白いScriptがたくさんあります。
徐々に紹介していくつもりです。
◆Glossy.jsをページに取り込む
Glossy.jsのページ>Download から [glossy.js 1.21]をダウンロードします。
(ダウンロードファイルはglossy.zip)
ダウンロード後ファイルを解凍したら、glossy.jsを必要な場所に配置し、
スクリプトを利用したいHTMLに宣言します。
<script type="text/javascript" src="glossy.js"></script>
対応ブラウザは、Mozilla Firefox 1.5以上、 Opera 9以上、IE6以上 、Safariです。
ただし、IEとそれ以外のブラウザでは見え方が若干異なるようです。
◆つやつや画像を表示してみる
次の画像にグロス効果をつけてみます。
見てわかるとおり、なんの変哲もないベタ塗り画像です。
<HTML>
<img src="images/5.jpg" class="glossy"/>
指定方法は簡単です。
グロス効果を出したい画像タグにclass="glossy"を指定するだけ。
素敵すぎます。
ボタン画像なんかにかなり使えそう。
Glossy.jsは複数のclassを指定することで、細かく表現を指定できるようです。
次回はその他のclassについて解析していきます。