CSS Filter Effects!
CSS Filter Effects の紹介をしてみたいと思います。
現在、このプロパティは Webkit nightly と Google Chrome Canary で使うことができます。たぶん dev とかにももうすぐ来るんじゃないでしょうか。
Filter Effects 1.0 – 5. The ‘filter’ property
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()
セピア色にするフィルタです。
指定などはグレースケールと一緒です。
サンプルに sepia() を指定するとこうなります。
saturate()
彩度を変化させます。
値には 0% から指定できます。0% では彩度がなくなり、100% の場合は何も変化しません。
また、100% より大きな値を指定できます。
パラメータが省略された場合には 100% として扱われます。
サンプルに saturate(50%) を指定するとこうなります。
hue-rotate()
色相環を回転させます。
値は角度で指定します。0deg の場合は変化しません。
パラメータが省略された場合には 0deg として扱われます。
サンプルに hue-rotate(180deg) を指定するとこうなります。
invert()
色反転を行います。
0% から 100% の値を指定できます。
0% の場合は何も変化しません。100% では完全な反転となります。
パラメータが省略された場合は 100% として扱われます。
サンプルに invert() を指定するとこうなります。
opacity()
不透明度を変化させます。
0% から 100% の値を指定できます。
0% の場合は完全な透明になります。100% の場合は変化しません。
パラメータが省略された場合は 100% として扱われます。
サンプルに opacity(50%) を指定するとこうなります。
brightness()
明度を変化させます。
値は 0% から指定できます。0% では完全に真っ黒になり、100% の場合は何も変化しません。
また、100% より大きな値を指定できます。
パラメータが省略された場合には 100% として扱われます。
サンプルに brightness(20%) を指定するとこうなります。
contrast()
コントラストを変化させます。
値は 0% から指定できます。0% では完全に真っ黒になり、100% の場合は何も変化しません。
また、100% より大きな値を指定できます。
パラメータが省略された場合には 100% として扱われます。
サンプルに contrast(200%) を指定するとこうなります。
blur()
ぼかします。
値には半径を指定します。これには CSS の長さの単位が使えます。パーセンテージは使えません。
パラメータがない場合には 0 が使われます。
サンプルに blur(3px) を指定するとこうなります。
drop-shadow()
ドロップシャドウを適用します。
指定形式は CSS の <shadow> 形式ですが、inset は指定できません。
サンプルに drop-shadow(rgba(0, 0, 0, 0.7) 3px 3px 6px) を指定するとこうなります。
かなり駆け足な感じですが、以上です。
他にも custom() 関数とかありますが、使えるかどうか分からないので書きませんでした。
(使い方もよく分からないので……)
ものにもよるでしょうが、Firefox の場合は CSS に SVG Filter を使うことで似たようなことはできると思います。
また、フィルタは IE でも独自のものができますね。IE10 で使えるかどうかは分かりませんが。
しばらくは遊びで使う分にはいいんじゃないかなー思っています。色々できそうですしね。
最後に、参考になりそうなリンクをまとめておきます。