--- title: CSSフィルタことはじめ tags: CSS HTML5 HTML JavaScript author: bluebird slide: false --- #CSSフィルタサンプル作成  今更ながらですが、CSSフィルタに興味があり、サンプル作成がてら調べてみました。作成したサンプルは下記になります。 CSSフィルタデモ わりと簡単に作成でき、かなり効果があるエフェクトをかけられるのは、正直びっくりしました。 例えば、セピアにしてみたいなと思ったら、下記のようにfilterプロパティにエフェクト関数を指定するだけみたいです。 ```html:CSSフィルタ filter:sepia(100%); ``` セピア100%の画像はこんな感じになります。 CSSフィルタデモ #対応ブラウザ  最近、対応するブラウザが増えてきてはいますが、ベンダープレフィックスなしでは動作しないみたいです。私も念のため、PC、スマホに搭載されるブラザで確認してみましたが、やはりベンダープレフィックスは必要みたいです。 ベンダープレフィックスを付ける場合は下記のようになります。 ```html:CSSフィルタ -webkit-filter:sepia(100%); // for Google Chrome and Safari -moz-filter:sepia(100%); // for Firefox -o-filter:sepia(100%); // for Oper -ms-filter:sepia(100%); // for Internet Explorer ``` 但し、ベンダープレフィックスを付けても動作しないブラウザがあるので、ご注意下さい。 CSSフィルタに対応しているブラウザとそのバージョンは下記の通りとなります。 |ブラウザ|バージョン| |:---|:---| |Chrome|27以降| |Safari|6.1以降| |Opera|23以降| |iOS Safari|6.1以降| |Android Browser|4.4以降| |Blackberry Browser|10以降| 因みに、``opera``は、``-webkit-``のベンダープレフィックスをサポートしているので、専用のベンダープレフィックスを付けなくても動作します。一応確認済みになります。 ブラウザ毎のCSSフィルタの対応状況は[caniuse](http://caniuse.com/#feat=css-filters)を参考にしてみて下さい。 #パフォーマンス  それと、サンプルを作成していて気になったのは、パフォーマンスですね。 今回のサンプルを用いて、PC、スマホ搭載のブラザで確認してみましたが、体感的に、遅いという感じは受けませんでした。この辺は、エフェクト関数を組み合わせてアニメーションとかを作成した場合は、もしかしたらパフォーマンスの差が出てくるのではと思ってます。また、時間がある時にでも検証してみたいと思ってます。CSSフィルタのパフォーマンスに関してまとめている[html5rocks](http://www.html5rocks.com/en/tutorials/filters/understanding-css/)を参考にしてみて下さい。 こちらのサイトの検証結果だと、エフェクト関数毎のパフォーマンスは下記のようになっているみたいです。 |エフェクト関数|パフォーマンス| |:---|:---| |blur|slow unless accelerated| |grayscale|very fast| |sepia|very fast| |saturate|very fast| |hue-rotate|fast| |invert|very fast| |opacity|can be slow| |brightness|fast| |contrast|fast| |drop-shadow|can be slow| |url()|Varies, fast to slow| # まとめ fiterプロパティについて簡単にまとめましたので、ご参考にして下さい。 今回参考にさせて頂いたサイトは、下記の通り。  [Filter Effects Module Level 1-W3C](http://www.w3.org/TR/filter-effects/)  [filter-MDN](https://developer.mozilla.org/ja/docs/Web/CSS/filter)  [Understanding CSS Filter Effects-html5rocks](http://www.html5rocks.com/en/tutorials/filters/understanding-css/) |エフェクト関数|処理|値|対応ブラウザ| |:---|:---|:---|:---| |blur|ぼかし|0px(初期値)~10px|webkit| |grayscale|モノクロ|0%(初期値)~100%|webkit| |sepia|セピア|0%(初期値)~100%|webkit| |saturate|彩度|0%~100%(初期値)|webkit| |hue-rotate|色相回転|0deg(初期値)~360deg|webkit| |invert|階調反転|0%(初期値)~100%|webkit| |opacity|透過度|0%~100%(初期値)|webkit| |brightness|明るさ|0%~100%(初期値)|webkit| |contrast|コントラスト|0%~100%(初期値)|webkit| |drop-shadow|影|CSS3のdrop-shadowと同様|webkit| |url()|カスタム用|[詳細](http://webos-goodies.jp/archives/how_to_use_css_shaders.html)|webkit,mozilla| # サンプルコード  最後に、今回作成したサンプルのソースを開示しますので、興味ある方がいましたら、実際に動かして、filterプロパティのエフェクトを実感してみて下さい。 ```html
サンプル
```