CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mckee

今回は、Chromeに実装された「CSS Filter Effects」を試してみました。
動かせるサンプルを作ってみましたので、そちらでフィルタの動きを確認できます。
以下、詳細です。

CSS Filter Effectsについて

W3Cが3月末に公開したドラフト仕様「Filter Effects 1.0」を、
Chrome に実装したもので、画像へのフィルタ処理をCSSで実現したものです。
filterプロパティ(要ベンダプレフィックス)に、フィルタの種類と効果の値を指定して使用します。
フィルタの種類と指定方法の詳細は下にサンプルコードがあります。

サンプル概要

※対応ブラウザ:Chrome 最新
※動作にはCPUパワーが少々必要になります。
※サンプルコードは紹介用に編集してありますので、
動作しているコードと異なる部分があります。

・画像の上をドラッグした範囲に、フィルタがかかります。何か所もドラッグすることができます。
・フィルタの種類と設定値を変更できます。
・フィルタの後ろに敷いてある、元画像の表示/非表示を切り替えられます。
・点線の中に画像をドラッグアンドドロップして、対象を好きな画像に変更できます。
・変更した画像に、再びドラッグでフィルタをかけることができます。

サンプル

サンプルについて

CSS Filter Effectsにはフィルタの種類が幾つかあるので、その効果を試せるものをと
サンプルを作りました。「CSSだけで」などと言っておきながら、JavaScriptを書くのが
楽しくなってしまいました…

内容はマウスでドラッグした範囲に、指定したフィルタをかけるというものです。
設定値には適当な値が設定してあるので、ひとまずはフィルタを選択するだけで使用できます。
値を入力することで、フィルタのかかる度合いを変更することもできます。
単位はフィルタに応じたものを自動で設定してくれるので気にする必要はありません。
実際に適応されたスタイルは赤字で表示されます。
最後に適応されたフィルタは値の書き換えが可能です。
※現在は、指定範囲一つに対して、一つのフィルタしかかかりません。

点線の中に画像をドラッグアンドドロップでアップロードすることができますので、
フィルタを掛ける対象をお好きな画像に変更することが可能です。
※アップロードした画像は 幅512px 高さ512pxに変更されます。

フィルタの種類

hue-rotate (色相)

色相を変化させます。
引数には 10deg や75deg のように色相環を回転させたい角度を指定します。
初期値は 0deg。

-webkit-filter:hue-rotate(100deg);

brightness (明度)

明度を変化させます。
引数には現在の明度を0%として、どのくらい明度を上げ下げするのか
適応度合いを -100% から 100% の値で指定できます。
値は -100% が黒、100% が白で、値が大きくなればなるほど明るくなります。

-webkit-filter:brightness(50%);

saturate (彩度)

彩度を変化させます。
引数には現在の彩度を100%として、どのくらい彩度を上げ下げするのか適応度合いを指定できます。
100%以上の値で彩度が高くなります。
値が大きくなればなるほど彩度が高くなります。
引数がない場合は、100% と同等です。

-webkit-filter:saturate(50%);

grayscale (グレースケール)

グレースケールを適応させます。
適応度合いを 0% から 100% の値で指定できます。
フィルタを適用する割合を%指定で引数に渡すことができます。
100%が完全にフィルタが適用された状態です。
引数がない場合は、100% と同等です。

-webkit-filter:grayscale(100%);

sepia (セピア)

セピアを適応させます。
適応度合いを 0% から 100% の値を指定できます。
フィルタを適用する割合を%指定で引数に渡すことができます。
100%が完全にフィルタが適用された状態です。
引数がない場合は、100% と同等です。

-webkit-filter:sepia(100%);

opacity (透明度)

透明度を変化させます。
引数は透明度の適応度合いを 0% から 100% の値で指定できます。

-webkit-filter:opacity(50%);

invert (階調の反転)

透明度を変化させます。
引数には0% から 100% の値を指定できます。
引数がない場合は、100% と同等です。

-webkit-filter:invert();

contrast (コントラスト)

コントラストを変化させます。
引数には現在のコントラストを100%として、どのくらいコントラストを上げ下げするのか適応度合いを指定できます。
100%以上の値でコントラストが高くなります。
値が大きくなればなるほどコントラストが高くなります。
引数がない場合は、100% と同等です。

-webkit-filter:invert();

blur (ぼかし)

ぼかしを適応します。
引数にはぼかす範囲をpxなどで指定できます。
単位にはCSSの長さの単位が使えるようです。
引数がない場合は、0% と同等です。

-webkit-filter:blur(5px);

drop-shadow (ドロップシャドウ)

ドロップシャドウを適応します。
引数の書式は CSS の box-shadowと同様ですが、inset は指定できません。
(x方向の大きさ、y方向の大きさ、影の広がり、色)の順で指定します。

-webkit-filter:drop-shadow(10px 10px 10px #666666);

CSS Filter Effectsの便利なところ

なんといっても画像に簡単にフィルタが掛けられるというのは素晴らしいです。
フィルタを多重にかけることもできるので、これまで手間だった画像フィルタが簡単に
実現できます。
これまでgetImageDataで取得したデータのRGB値を変化させてフィルタを実現したりとかは
ありましたが、プロパティと値でできてしまうのは手軽で良いですね。
画像のリンクなどでは、ロールオーバ画像を用意しなくても、CSS Filter Effectsで
様々な種類の効果が用意できるので便利そうです。

CSS Filter Effectsのこうだったら良いのにと思うところ

CSS Filter Effects のかかった状態を、画像として保存する方法があったらもっと便利だと
思うのですが、僕の浅い知識では、良い方法が思いつきませんでした。
どなたか良い方法をご存知でしたら教えていただきたいです。

まとめ

CSS Filter Effectsは使いどころが、CSSなのでブラウザ上の見た目にしか使用できない様子
ですが、画像の編集技能がない方でも、手軽にフィルタをかけることができるので、ちょっとした
画像素材の代わりとなってくれそうです。また、アニメーション系プロパティと組み合わせて、
CSSだけでさらに凝ったアニメ―ションが実現できそうです。

Subscribe:
pagetop