CSS補足解説: Filter(フィルタ)

filter: フィルタ関数

iOS6やSafari6、Chromeが対応したfilterプロパティを利用すると、文字や画像に対してCSSでさまざまなフィルタを適用することができます。たとえば、ブラーを適用する場合はblur()を利用し、次のように指定します。

オリジナル画像(上)とブラーでぼかした画像
div#filter
 {-webkit-filter: blur(5px);}
filterプロパティで指定できるフィルタ関数とその効果については、こちらのサイト:「CSS Filter Effects」が参考になります。

[掲載モジュール: Filter Effects 1.0 (Editor’s Draft)