CSS Shaders はじめの一歩、CSS Filter を知る

Posted :

GraphicalWeb Advent Calendar 2012 の 6日目の記事です。

CSS Shaders は、利用することでこれまでの CSS の表現ではできなかった、要素に対する複雑な変形を行うことができます。例えば、サイン波を利用して次のような変形が可能です。

まずは CSS Shaders の書き方を知る前に CSS Filters についても少し知っておきましょう。

CSS Filters とは

SVG にあった Filter 機能を整理した新しい仕様、Filter Effects 1.0の草案が現在 W3C に提出されています。この中には CSS のインターフェイスとして用意された filter プロパティーも含まれています。 CSS Filter とは特にこの filter プロパティーを指します。

CSS の filter プロパティーには値として指定できる関数がいくつか用意されており、これらを利用すると簡単に表現効果を HTML の要素に与えることができます。

例えば、半径を 5px ぼかしたいのであれば

selector{
    -webkit-filter: blur( 5px );
}

のように記述します。

demo

コントラストを強めたいのであれば

selector{
    -webkit-filter: contrast( 5 );
}

のように指定します。

demo

この他に filter プロパティーの値として指定できる関数は様々あり、その引数も、関数に応じて様々です。これらの filter 効果により、これまでの Web ではできなかった表現が可能となるわけです。

効果 関数名 引数に指定できる値
グレースケール grayscale() 数値 or パーセンテージ
セピア sepia() 数値 or パーセンテージ
彩度 saturate() 数値 or パーセンテージ
色相 hue-rotate() 角度
階調の反転 invert() 数値 or パーセンテージ
透明度 opacity() 数値 or パーセンテージ
明度 brightness() 数値 or パーセンテージ
コントラスト contrast() 数値 or パーセンテージ
ぼかし blur() 長さ
ドロップシャドウ drop-shadow()
SVGを参照する url() URL
CSS Shaders! custom() shaderや分割数など

さて、こうした filter プロパティーの関数の一つに custom() が存在します。CSS Shaders は、CSS Filters の中でも特に custom 関数のことを指します。そして、CSS Shaders、つまり CSS Filters の custom 関数利用することにより、冒頭に示したキャプチャーのような複雑な変形が可能なのです。

次回は、custom() の使い方についてを解説します。


余談ですが、Firefox では、SVG の Filter を CSS 経由で HTML の要素にも適用することができます。これにより、現在 WebKit に実装されている CSS Filters とほぼ同じ表現が Firefox でも可能です。ここで紹介した関数もおそらく近いうちに実装されるでしょう。

加えて余談ですが、冒頭で解説した通り、Internet Explorer は 4.0 から 9 まで独自に filter プロパティーを実装していました。これは今回紹介した W3C に提出されている filter プロパティーとシンタックスは別物ではありますが、よく似ているものも多数ありました。IE は Web 標準に足りない表現を昔からわかっていたというわけですね。