skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

艶やかで立体的な画像を作成するjavascript「Glossy.js」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像を本格的に加工するにはPhotoShopのような編集ソフトが必要になります。
また加工のための技術も求められるなど負担は大きいものです。
netzgestaが公開しているGlossy.jsを導入すると簡単に艶やかで立体的な画像を作成することが出来ます。

使用方法
Glossy.jsからglossy.jsをダウンロードしhead内に埋め込みます。
後は対応させたい画像にclass="glossy"を付ければ完成です。
細かな設定は以下の通りです。
・半径の変更："iradius数値" 最小20、最大50、デフォルト25
・影の変更："noshadow"
・背景色の変更："ibgcolor"HEXで指定
・背景色（グラデーション）の変更："igradient"HEXで指定
・グラデーション方向の変更："horizontal"
注意：なぜか左にfloatされる設定のようです。
艶やかで立体的な画像を作成するjavascript「Glossy.js」サンプル

記事作成：2007年07月23日

前の記事：カレンダーの表示＆日付を選択できるjavascript「CalendarPopup.js」
次の記事：ソートできる表を作成するjavascript「sorttable.js」