Glossy.jsを使う。(1)

最近よく目にする、つやつやした画像。
(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とそれ以外のブラウザでは見え方が若干異なるようです。

◆つやつや画像を表示してみる
次の画像にグロス効果をつけてみます。
sample1 sample2 sample3

見てわかるとおり、なんの変哲もないベタ塗り画像です。

<HTML>
<img src="images/5.jpg" class="glossy"/>

指定方法は簡単です。
グロス効果を出したい画像タグにclass="glossy"を指定するだけ。

terako music submit

素敵すぎます。
ボタン画像なんかにかなり使えそう。

Glossy.jsは複数のclassを指定することで、細かく表現を指定できるようです。
次回はその他のclassについて解析していきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください