JavaScriptだけで画像イフェクト「Bevel.js」
サイトの画像を角丸にしたり、影をつけたりするのは良くあることだ。単なる画像も、多少の変化をつけるだけで見栄えがずいぶん変わってくる。だが、一つの一つの画像にそうした変化をつけるのは面倒で、徐々にやらなくなってしまう。
そこで自動化を考えたい。とは言ってもサーバサイドではない。クライアントサイドで行うのだ。
今回紹介するフリーウェアはBevel.js、JavaScriptで画像にイフェクトを行うライブラリだ。元々Public Domainだったが、変わったようで、非営利の個人利用に限りフリーとなっている。
Bevel.jsを使うと、画像の角を丸くしたり、そこにさらに影を付けたりと言ったイフェクトをJavaScriptのみでできるようになる。ふちを暗くしたり、別な色にすることも可能だ。まるで画像編集したかのようだ。
対応しているブラウザはFirefox 1.5以上、Opera 9以上、IE 6以上そしてSafariだ。通常使われるブラウザであれば大抵サポート範囲ということだろう。万一対応していなくとも通常の画像としては表示されるはずなので、使って損はないだろう。
角丸の半径や重ねる色など、多彩に指定ができるようになっている。自分好みの変化をつけるのは容易だ。毎度画像を加工して面倒になっていた方は、Bevel.jsの導入を検討してみてほしい。
bevel.js (with IE 6/7 support)