SVG Filter & CSS3 を使いグレースケールやぼかしを利用する方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは Honma です。今回はデザインする際に役立ちそうな SVG (Webkit は CSS3) を使った、Grayscale Effect と Blur Effect (ぼかし) の利用方法です。記述はすごく簡単!

filter_effect

HTML

<!– Grayscale Effect –>
<img id=”grayscale-effect” src=”URL” alt=”” />
<!– Blur Effect –>
<img id=”blur-effect” src=”URL” alt=”” />

CSS

/* Grayscale Effect */
#grayscale-effect {
-webkit-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><defs><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></defs></svg>#grayscale”);
filter: gray;
}
/* Blur Effect */
#blur-effect {
-webkit-filter: blur(3px);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><defs><filter id=’blur’><feGaussianBlur in=’SourceGraphic’ stdDeviation=’3′ /></filter></defs></svg>#blur”);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=’3′);
}

フィルターをかけたい画像、または要素に id を付加し CSS に各種 filter の記述をするだけです。 SVG の設定は HTML に書くこともできますが、今回は CSS に data:image として記述することでより導入しやすくしてみました。

残念ながら IE はうまく表示されないようですが、どちらもデザインの幅が広がる便利な技法なので、モダンブラウザ向けのサイトに是非導入してみてはいかがでしょうか。

以上になります。