SVG & CSS でアンサガのスキルパネルのようなメニューを作る

「SVG にチャレンジ！第1回」です。インライン SVG を使って「アンリミテッド：サガ」というゲームのスキルパネル風のメニューを作ります。

CSS と SVG filter でガラスっぽい効果をつける

SVG のフィルタについては以前も少し書きましたが、今回は feGaussianBlur 要素を使って、ガラスのようなエフェクトを付けてみたいと思います。

タイトル通りなんですが、画像を1枚だけ用意して、それをカラーで使ったりグレースケールで使ったりしたいわけです。IE には最初からフィルタが用意されていますが、クロスブラウザにできないかと思って調べてみました。