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 で使えるかどうかは分かりませんが。
しばらくは遊びで使う分にはいいんじゃないかなー思っています。色々できそうですしね。
最後に、参考になりそうなリンクをまとめておきます。