CSS Filter Effects!

公開：2011年12月26日 02:40
更新：2012年01月06日 12:18

「CSS Filter Effects」の紹介をしてみたいと思います。
現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。

2011年12月16日版を参考に書いていきたいと思います。
サンプルページは以下です。

このサンプルの画像は、通常だと次のように表示されます。

左側がjpg画像で、右側はハートの外側が透過されているpng画像です。
これにフィルタをかけていきます。

なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。

このプロパティをWebkitで使う場合は-webkit-filterのように記述します。
値はフィルタ関数を使います。これは空白区切りにより複数指定できます。

`grayscale()`

グレースケールにするフィルタです。
0%から100%の値を指定できます。
0%の場合は何も変化しません。100%では完全なグレースケールになります。
パラメータが省略された場合は100%として扱われます。

言い方が変かもしれませんが、100%を1とした形式でも記述できます。
例：grayscale(1)
これはこれ以降のものでも同様です。

サンプルにgrayscale()を指定するとこうなります。

セピア色にするフィルタです。
指定などはグレースケールと一緒です。

サンプルにsepia()を指定するとこうなります。

彩度を変化させます。
値には0%から指定できます。0%では彩度がなくなり、100%の場合は何も変化しません。
また、100%より大きな値を指定できます。
パラメータが省略された場合には100%として扱われます。

サンプルにsaturate(50%)を指定するとこうなります。

色相環を回転させます。
値は角度で指定します。0degの場合は変化しません。
パラメータが省略された場合には0degとして扱われます。

サンプルにhue-rotate(180deg)を指定するとこうなります。

色反転を行います。
0%から100%の値を指定できます。
0%の場合は何も変化しません。100%では完全な反転となります。
パラメータが省略された場合は100%として扱われます。

サンプルにinvert()を指定するとこうなります。

不透明度を変化させます。
0%から100%の値を指定できます。
0%の場合は完全な透明になります。100%の場合は変化しません。
パラメータが省略された場合は100%として扱われます。

サンプルにopacity(50%)を指定するとこうなります。

明度を変化させます。
値は0%から指定できます。0%では完全に真っ黒になり、100%の場合は何も変化しません。
また、100%より大きな値を指定できます。
パラメータが省略された場合には100%として扱われます。

サンプルにbrightness(20%)を指定するとこうなります。

コントラストを変化させます。
値は0%から指定できます。0%では完全に真っ黒になり、100%の場合は何も変化しません。
また、100%より大きな値を指定できます。
パラメータが省略された場合には100%として扱われます。

サンプルにcontrast(200%)を指定するとこうなります。

ぼかします。
値には半径を指定します。これにはCSSの長さの単位が使えます。パーセンテージは使えません。
パラメータがない場合には0が使われます。

サンプルにblur(3px)を指定するとこうなります。

ドロップシャドウを適用します。
指定形式はCSSの&lt;shadow>形式ですが、insetは指定できません。

サンプルにdrop-shadow(rgba(0, 0, 0, 0.7) 3px 3px 6px)を指定するとこうなります。

かなり駆け足な感じですが、以上です。
他にもcustom()関数とかありますが、使えるかどうか分からないので書きませんでした。
（使い方もよく分からないので……）

ものにもよるでしょうが、Firefoxの場合はCSSにSVG Filterを使うことで似たようなことはできると思います。
また、フィルタはIEでも独自のものができますね。IE 10で使えるかどうかは分かりませんが。
しばらくは遊びで使う分にはいいんじゃないかなー思っています。色々できそうですしね。

最後に、参考になりそうなリンクをまとめておきます。