CSS filterプロパティとFilter Effectsの話

CSS Property Advent Calendar 2013の5日目の記事を書かせていただくことになりました。テーマが「CSSのプロパティに関すること」となっているので、最近注目している「filterプロパティ」について書きたいと思います。任意の要素にエフェクトをかけられるプロパティとなります。

filterプロパティを使ったサンプル

まずは以下のサンプルデモを見てください。それぞれのスライダーを動かすことで、写真にエフェクトをかけられるようになっています。filterプロパティを使うと以下のような写真のレタッチ機能を実装することも可能です。好きな画像を表示させてお試しいただけます。(アップした画像はブラウザに表示させるだけで、保存などされません。ご安心ください。)※Webkit系のブラウザでしか動かないかもしれません。

CSS Filter Effectsサンプルデモ用画像 - 焚き火

  • コントラスト: contrast 100%
  • 明るさ: brightness 100%
  • 彩度: saturate 100%
  • 色相回転: hue-rotate 0deg
  • 反転: invert 0%
  • 透明度: opacity 100%
  • ぼかし: blur 0px
  • モノクローム: grayscale 0%
  • セピア: sepia 0%

img {
  -webkit-filter: contrast(100%) brightness(100%) saturate(100%) hue-rotate(0deg) invert(0%) opacity(100%) blur(0px) grayscale(0%) sepia(0%);
  -moz-filter: contrast(100%) brightness(100%) saturate(100%) hue-rotate(0deg) invert(0%) opacity(100%) blur(0px) grayscale(0%) sepia(0%);
  filter: contrast(100%) brightness(100%) saturate(100%) hue-rotate(0deg) invert(0%) opacity(100%) blur(0px) grayscale(0%) sepia(0%);
}

上記サンプルデモのソースコードはjsdo.itで確認可能です。

最近RAWデータで写真を撮ってレタッチソフトで現像なんかをよくしていますが、同じようなことがWeb上で、しかもCSSでできるということで、このプロパティの存在を知った時はすごく感動しました。

Filterプロパティとは

「filterプロパティ」は、W3Cが2012年3月に公開したドラフト仕様である「Filter Effects 1.0」内で策定が進められているCSSプロパティとなります。定義されているエフェクト関数をfilterプロパティの値として指定することで、任意の要素に対してさまざまなエフェクトをかけることができます。かつてのIEで独自に実装されていたfilterプロパティとは別物になるということです。

詳しい仕様の詳細は以下のサイトをご確認ください。

エフェクト関数

filterプロバティに指定できるエフェクト関数は以下の11種類となります。パフォーマンス部分はHTML5 Rockを参照しています。

エフェクト関数処理値(初期値:太字)対応ブラウザパフォーマンス
grayscaleモノクロ0〜100%webkitvery fast
sepiaセピア0〜100%webkitvery fast
saturate彩度0〜100〜700%webkitvery fast
hue-rotate色相回転0〜360degwebkitfast
invert反転0〜100%webkitvery fast
opacity透明度0〜100%webkitcan be slow
brightness明るさ0〜100%〜300%webkitfast
contrastコントラスト0〜100%〜300%webkitfast
blurぼかし0〜10pxwebkitslow unless accelerated
drop-shadow例: 0 0 2px blackwebkitcan be slow
url()カスタム用詳細webkit, mozillaVaries, fast to slow

スマホを含む最新の対応ブラウザについては以下で確認可能です。

filterプロパティの指定方法

例えばコントラスト(contrast)を50%指定したい場合は以下のように指定します。

element {
  -webkit-filter: contrast(50%);
  -moz-filter: contrast(50%);
  filter: contrast(50%);
}

複数のエフェクト関数を指定することも可能で、指定したいエフェクト関数をスペースで区切ってつなげていきます。例えばコンストラス(contrast)を50%、明るさ(brightness)を30%、透明度(opacity)を80%、ぼかし(blur)を1px指定したい場合は以下のように指定します。

element {
  -webkit-filter: contrast(50%) brightness(30%) opacity(80%) blur(1px);
  -moz-filter: contrast(50%) brightness(30%) opacity(80%) blur(1px);
  filter: contrast(50%) brightness(30%) opacity(80%) blur(1px);
}

filterプロパティの活用方法

filterプロパティの活用方法としては、上記のサンプルデモのように画像のレタッチ用に使用するのがまず最初に思い浮かぶと思います。Instagramのような写真のフィルター機能のようなものを実装したくなりますが、filterプロパティでフィルターをかけた画像を保存したり、どこかにアップロードしたりするのはけっこう難しかったりします。そのような機能を実装するならばcanvasであったり、jQueryプラグインのvintage.jsなどを使用した方がもっと楽に実装できると思います。

ということで、手軽にfilterプロパティを使用するのであれば、ここのサイトのデモでも見られるような何かイベントが発生した際にアニメーションを使って変化をつけるような使い方ではないでしょうか。今回はCSS Property Advent Calendarの記事なので、以下CSSで実装してみました。

ちょっとした使い方サンプル

filterプロパティ使用例画像 - 焚き火

↑カーソルを合わせてみてください。

ソースコードは以下の通りです。

img {
  width: 100px;
  -webkit-filter: grayscale(90%) blur(4px) opacity(90%);
  -moz-filter: grayscale(90%) blur(4px) opacity(90%);
  filter: grayscale(90%) blur(4px) opacity(90%);
  transition: 1s;
}
img:hover {
  width: 300px;
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

それからfilterプロバティは、画像以外の要素でも指定可能なので、リッチな質感のUIなどを作る上でも使えるのではないでしょうか。


最後にまだまだ策定中のプロパティであり、webkit系のブラウザのみでしか使用もできませんが、任意の要素にこれだけの変化を与えることができるfilterプロパティは、積極的に使っていきたいプロパティでもあります。Androidでは4.4でついに対応し、iOSではすでにiOS6で対応済みとなっているので、当分の間はスマホでの利用が中心になるのではないでしょうか。いずれにせよ、今後の動きには注目していきたいプロパティのひとつだと思います。

以上でCSS Property Advent Calendar 2013の記事終わります。明日の6日目は私もよく参考にさせていただいているyoshiki katoさんとなります。

コメント一覧

  • 必須

コメント