Chromium19にcss filterが実装されたので試してみた。

memo

Chromium 19でcss filter effect1.0に実装したということだったので試してみたので、メモしました。
ちなみに、iOS6のSafariでも対応するみたい。

css filterはsvgの一部として提供されたのが最初で、CSSで使えるようにW3CのCSSワーキンググループに提案されたもだそうだ。
IEはこれとは別に独自仕様でfilterを使えたけど、現在は非推奨っぽいですね。

フィルター適用はページがレンダリングされて、描画される前にビットマップデータに対して計算を行い、ビットマップデータの上に計算結果のフィルターを表示させるみたい。またフィルターの種類などにより適用されるまでの時間が異なるため、とくにスマートフォンはパフォーマンスを考慮してチューニングしたほうがいいっぽい。ちなみに、ChromeはGPUを使って処理してるっぽい。

あと、SVGで定義したフィルターも参照できるみたい。

そんなcss filterで使える関数(エフェクト)は

  • グレースケール:grayscale()
  • セピア:sepia()
  • 彩度:saturate()
  • 不透明度:opacity()
  • ぼかし:blur()
  • 輝度:brightness()
  • 反転:hue-rotate()
  • コントラスト:contrast()
  • 色相回転:invert()
  • ドロップシャドウ:drop-shadow()

全然関係ないけど、scssでcss-filter書いてると、grayscaleとopacityが
[css]
/* -webkit-filter: grayscale(100%);で定義 */
.grayscale{-webkit-filter:#010101}
[/css]

[css]
/* -webkit-filter:opacity(0.2);で定義 */
.opacity{-webkit-filter:1;}
[/css]

けど、この辺りはgithubで修正されてるっぽい。js-fiddleのsassのバージョンの問題なのか、次のバージョンで修正されるのかな。

とはいえ、これが各ブラウザで提供されれば、組み合わせて使うことでinstagramみたいな画像処理をお手軽に作れるのでいいですね。

いろいろ詳しくはHTML5 ROCKS TUTORIALS にありました。

Comments