CSS Filter Effects!

Category : CSS

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

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

CSS Filter Effects Sample

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

CSS Filter Effects サンプルのスクリーンショット(フィルタなし)

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

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

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

grayscale()

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

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

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

CSS Filter Effects サンプルのスクリーンショット(グレースケール)

sepia()

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

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

CSS Filter Effects サンプルのスクリーンショット(セピア)

saturate()

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

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

CSS Filter Effects サンプルのスクリーンショット(彩度)

hue-rotate()

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

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

CSS Filter Effects サンプルのスクリーンショット(色相環回転)

invert()

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

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

CSS Filter Effects サンプルのスクリーンショット(色反転)

opacity()

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

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

CSS Filter Effects サンプルのスクリーンショット(不透明度)

brightness()

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

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

CSS Filter Effects サンプルのスクリーンショット(明度)

contrast()

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

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

CSS Filter Effects サンプルのスクリーンショット(コントラスト)

blur()

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

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

CSS Filter Effects サンプルのスクリーンショット(ぼかし)

drop-shadow()

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

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

CSS Filter Effects サンプルのスクリーンショット(ドロップシャドウ)


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

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

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

Leave a Reply