memocarilog

SVG filter の非対応ブラウザ用のライブラリを探していたら、CSS Filter Effects を非対応ブラウザでも使えるようにするライブラリを見つけたので試しに使ってみました。（SVG filter の非対応ブラウザ用のライブラリは見つかりませんでした…。）

CSS Filter Effects について

CSS の Filter Effects については以前の記事「透過pngにもそのままシャドウをかける事ができる filter: drop-shadow 」でも少し紹介していますが、HTML 上の画像を CSS のみでぼかしたり色相を変えたりなど、さまざまな視覚効果を出すことができます。

この記事を書いた当時は Google Chrome にしか実装されていない機能でしたが、現在は IE（IE は全く未です）と Opera Mini 以外の最新ブラウザで対応されているようでした。（Android browser は 4.4+ で対応）

ぼかし効果のサンプル

以下のような指定で簡単に画像にぼかし効果を入れることができます。

img{
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

See the Pen filter: blur(3px) by Saomocari (@Saomocari) on CodePen.

その他の効果は以下のようなものがあります。

CSS-Filters-Polyfill がサポートしている Filter Effects の種類とブラウザ

コントラスト（ contrast() ）と SVG の filter（ url() ）以外の filter が CSS-Filters-Polyfill を使って使用できるようになります。

Filter Effects が適用できるようになるブラウザは現時点では以下のものです。IE10+, Android browser, Opera Mini は対象外となるので、IE10 以上と Android 4.3 以下では、どっちみち CSS Filter Effects は使えないことになります…。

Chrome 20+ (brightness filter 28+), Opera 15+, Safari 6+, Yandex 1+, Firefox 4+, IE 6 – 9 on desktop (IE 6 & 7 slightly degraded), iOS 6+ Safari/Chrome/Webview
Chrome 28+ on Android, Opera Mobile 14+, Blackberry Browser 10+, Firefox 4+ on Mobile, IE on Windows Phone 7, which just supports grayscale.

詳しくは CSS-Filters-Polyfill/README.md をご確認下さい。

CSS-Filters-Polyfill のダウンロードと使い方

以下のページよりライブラリをダウンロードできます。（このライブラリはローカルでは動きませんのでご注意です。）
Schepp/CSS-Filters-Polyfill

ダウンロードしたファイルのうち lib フォルダをまるごとアップロードします。そして、HTML ファイルのライブラリを読み込む記述の前に以下のようなコードを記述します。

<script>
	var polyfilter_scriptpath = '/memocarilog-demo/css_filters_polyfill/lib/';
</script>

「var polyfilter_scriptpath = 」の先はルートディレクトリから lib ファイルまでのパスを記入します。

そして続けて以下のように３つのファイルを読み込みます。

<script src="../lib/contentloaded.js"></script>
<script src="../lib/cssParser.js"></script>
<script src="../lib/css-filters-polyfill.js"></script>

あとは、フィルターをかけたい要素に通常通り filter の CSS 指定するだけです。CSS-Filters-Polyfill を使うとベンダープレフィックスも不要になります。

グレースケールにしたい場合は

filter: grayscale(1);

セピアにしたい場合は

filter: sepia(1);

など…。以下実際に使ってみたサンプルとコードです。

CSS-Filters-Polyfill を使ってみたサンプル

CSS-Filters-Polyfill を使って Filter Effects をかけてみたサンプル｜memocarilog

サンプルの CSS コード

.glay{
    filter: grayscale(1);
}
.sepia{
    filter: sepia(1);
}
.blur{
    filter: blur(3px);
}
.invert{
    filter: invert(1);
}
.brightness{
    filter: brightness(60%);
}

サンプルの HTML

<div>
	<h2>グレースケール / grayscale(1)</h2>
	<img class="glay" src="img/mori1.jpg" alt=""><img src="img/mori1.jpg" alt="">
</div>
<div>
	<h2>セピア / sepia(1)</h2>
	<img class="sepia" src="img/neko2.jpg" alt=""><img src="img/neko2.jpg" alt="">
</div> 
<div>
	<h2>ぼかし / blur(3px)</h2>
	<img class="blur" src="img/mori2.jpg" alt=""><img src="img/mori2.jpg" alt="">
</div> 
<div>
	<h2>階調の反転 / invert(1)</h2>
	<img class="invert" src="img/inu.jpg" alt=""><img src="img/inu.jpg" alt="">
</div> 
<div>
	<h2>明度 / brightness(60%)</h2>
	<img class="brightness" src="img/neko1.jpg" alt=""><img src="img/neko1.jpg" alt="">
</div> 

---

使い方としては、CSS の filter の方が SVG よりも簡単ですが、IE のサポート範囲がこのライブラリを使っても微妙ですね…。IE では SVG のフィルターを使うようにするなど工夫が必要になりそうです。