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

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

• コントラスト: 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プロパティとは別物になるということです。

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

• Understanding CSS Filter Effects – HTML5 Rocks
• filter – CSS | MDN

エフェクト関数

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

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

• Can I use… Support tables for HTML5, CSS3, etc

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で実装してみました。

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

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

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

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さんとなります。