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