イナヅマTVログ

MDN filter

Chrome限定、CSS(-webkit-filter)でエフェクト

| 1件のコメント

Chrome CSSでベンダープレフィックスを付けたCSS3の-webkit-filterを使うと様々なエフェクトが使えるので試してみました。
残念ながら現Safari(5.1.7)では-webkit-filterはまだ使えません。
Safari 5.2では実装されるようです。
via: Apple gives developers new Safari, Xcode updates
caniuse.com: http://www.caniuse.com/#feat=css-filters

-webkit-filter-webkit-filter Demo
srcは右クリックなどでご確認ください。
Crome専用です、その他のブラウザでは動作しません。

デモファイルでは以下のような設定にしています。

sepia

range: 0 ~ 100, default: 0

-webkit-filter: sepia(100%);

grayscale

range: 0 ~ 100, default: 0

-webkit-filter: grayscale(100%);

invert

range: 0 ~ 100, default: 0

-webkit-filter: invert(100%);

opacity

range: 0 ~ 100, default: 100

-webkit-filter: opacity(100%);

brightness

range: -100 ~ 100, default: 0
いつの間にか仕様が変更になっていたようです。
range: 0 ~ 100, default: 100

-webkit-filter: brightness(100%);

contrast

range: 0 ~ 200, default: 100

-webkit-filter: contrast(100%);

saturate

range: 0 ~ 1000, default: 100

-webkit-filter: saturate(100%);

blur

range: 0 ~ 8, default: 0

-webkit-filter: blur(8px);

blurはX, Y同時にしか設定できないのが、残念。
別々に設定できれば使い道も増えるのに…

hue-rotate

range: 0 ~ 180, default: 0

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

drop-shadow

-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) 3px 6px 8px);

drop-shadow(color Xdistance Ydistance Blur);
drop-shadowは設定項目が多くなる。

gamma

gammaも使えるようなんだけど、使いどころが良くわかんないんで今回は割愛しました。
どんな時に使うといいの?

CSSでフィルターとエフェクト

CSSでフィルターができるようになるとCSSだけでエフェクト・アニメーションができるようになったりして便利かも。
:hoverや:focusで別に画像を用意せずに効果を付けることができるようになります。

AppleのSafariの素晴らしさをアピールするデモの一つ。
https://developer.apple.com/safaridemos/showcase/gallery/
アクティブじゃない画像はBlurがかかってる。
Safariはまだフィルターが使えないので、Blur付きと無しの2種類の画像を用意してJSで切り替えています。

これもSafariがフィルターに対応できるようになるとわざわざ画像を用意する必要がなくなるのはいいこと。
制作手間も省けるし、HTTPアクセスも削減できるし。

現時点ではクロスブラウザを考えると使いどころが無さげな技術だけど、来年あたりは使えるブラウザが勢揃いしてちょっとしたブームになったりする、のかな。

update 2012-10-04
Safari 6は-webkif-filterに対応していました。
上記デモも実行可能です。

iOS 6のモバイルSafariも対応していました。
しかしモバイルSafariだと、ネイティブのinput type=”range”が操作しずらい。
スライダー操作が不便すぎる。

update
Firefoxも対応したらしい。
MDN: filter

MDN filter

1件のコメント

  1. ピンバック: CSS3 animation + transition, 「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました « イナヅマTVログ

コメントを残す

必須欄は * がついています