画像に光沢を与えるjsライブラリ『Glossy.js』

HP登録でSEO対策！アクセスアップにコチラ！
検出率No.1・PC軽快さNo.1のウイルス対策ソフト

配布元:glossy.js
ライセンス:Netzgestade Software License Agreement. /Commercial Software Licenses
(商用利用不可.個人利用は無料で可能)

Glossy.jsは画像に光沢を与えることができるjavascriptライブラリです。

画像にclassを付けるだけで、非常にきれいな光沢をつけることが可能です。

設置方法

まず、glossy.js を読み込みます。

<script type="text/javascript" src="glossy.js"></script>

光沢を与えたい画像のclassにglossyを付けると画像に光沢が与えられます。

<img src="img.gif" alt="R" class="glossy" />

角丸の半径を変更する

iradius[角丸の半径]というclassを付加すると、角丸の半径が変更できます。

角丸の半径には[20～50]の数値をつけます。

<img src="img.gif" alt="R" class="glossy iradius20" />


ドロップシャドウを消す

noshadowというclassを付加すると、ドロップシャドウを消すことができます。

<img src="img.gif" alt="R" class="glossy noshadow" />

グラデーションの向きを変える

horizontalというclassを付加すると、縦向きのグラデーションを横向きに変えることができます。
(わかりにくいですが)

<img src="img.gif" alt="R" class="glossy horizontal" />

画像がない場合の設定

ibgcolor[背景色]やigradient[グラデーション色]を指定すると画像が設定されていない場合の表示を設定することができます。

[背景色]や[グラデーション色]には000000～FFFFFFのRGB値を指定できます。

<img src="" width="200" height="200" alt="R" class="glossy ibgcolor666666 igradientffffff" />

サンプル

画像がちょっとさびしい時などに利用すると便利かもしれません。

関連エントリー

画像に鏡面効果を与えるreflection.js
アルファ画像を扱うalphafilter.jsライブラリ
ロールオーバーを簡単に実装する-Image Rollover Code-
クロスフェードを実装する為のCrossfader
一番簡単な画像置換の方法-imageReplace.js-

スポンサードリンク

«URL短縮システム | メイン | Mac始めました-AirMacとAOSSを接続する方法-»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/71
トラックバック内容
» glossy.js from 社労士@BLOG
　上の画像ですが、WEB2.0的というか、いい感じでテカッています。もともとの画像は 　これですが、これはjavascriptで画像にエ...
トラックバック時刻: 2008年1月 4日 09:27
» 画像を綺麗にweb2.0風にしよう。。。 from kattsuk2 web memo
トラックバック時刻: 2008年7月17日 23:40
コメントを投稿