« canvas要素でデータからグラフ作成 | トップページ | YouTubeのタグ機能を利用した動画集 »

2008.07.22

iPhoneのメニューアイコンのような glossy.js

canvasタグで画像を劇的に変化させるエフェクト(NetzGesta.de)|Web Designing 2008年8月

前回チラッと紹介しましたが、8月号のWeb Designingの特集、「使い方はあなた次第!未来形Ajax」はとても勉強になります。いろいろあるサンプルの中から、今回もcanvasタグ絡みのモノを1つ紹介してみます。
このブログでも以前、「JavaScriptで画像加工」という記事で紹介している「NetzGesta.de」にglossy.js というスクリプトがあるんですが、これを使えば、簡単に画像にiPhoneのメニューアイコンのようなエフェクトをかけることができます。

百聞は一見に如かず、サンプルです。

↑このサンプルはこちらからダウンロードできます。

ソースコードを見てもらえば分かると思いますが、html上の各画像に"glossy"というclassを追加するだけです。また角に丸みを持たせたい場合は、"glossy iradius25"などと追加します。※数値はお好みで試して下さい。
詳しい設定方法は、「NetzGesta.de」に書かれていますし、その他のエフェクトもたくさんあるので、是非参考にしてみて下さい。

|

« canvas要素でデータからグラフ作成 | トップページ | YouTubeのタグ機能を利用した動画集 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41934018

この記事へのトラックバック一覧です: iPhoneのメニューアイコンのような glossy.js:

» JavaScriptで画像加工 [Good Sleep]
ソフト要らずで更新が手軽!|NetzGesta.de 今月号のWeb Designingに載っていたJavaScriptなんですが、結構使えるので紹介してみます。 写真をそのまま配置すると何だか味気な [続きを読む]

受信: 2008.07.22 15:10

« canvas要素でデータからグラフ作成 | トップページ | YouTubeのタグ機能を利用した動画集 »