Edited at

CSSフィルタことはじめ

More than 5 years have passed since last update.


CSSフィルタサンプル作成

 今更ながらですが、CSSフィルタに興味があり、サンプル作成がてら調べてみました。作成したサンプルは下記になります。

わりと簡単に作成でき、かなり効果があるエフェクトをかけられるのは、正直びっくりしました。

例えば、セピアにしてみたいなと思ったら、下記のようにfilterプロパティにエフェクト関数を指定するだけみたいです。


CSSフィルタ

filter:sepia(100%);


セピア100%の画像はこんな感じになります。


対応ブラウザ

 最近、対応するブラウザが増えてきてはいますが、ベンダープレフィックスなしでは動作しないみたいです。私も念のため、PC、スマホに搭載されるブラザで確認してみましたが、やはりベンダープレフィックスは必要みたいです。

ベンダープレフィックスを付ける場合は下記のようになります。


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を参考にしてみて下さい。


パフォーマンス

 それと、サンプルを作成していて気になったのは、パフォーマンスですね。

今回のサンプルを用いて、PC、スマホ搭載のブラザで確認してみましたが、体感的に、遅いという感じは受けませんでした。この辺は、エフェクト関数を組み合わせてアニメーションとかを作成した場合は、もしかしたらパフォーマンスの差が出てくるのではと思ってます。また、時間がある時にでも検証してみたいと思ってます。CSSフィルタのパフォーマンスに関してまとめているhtml5rocksを参考にしてみて下さい。

こちらのサイトの検証結果だと、エフェクト関数毎のパフォーマンスは下記のようになっているみたいです。

エフェクト関数
パフォーマンス

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

 filter-MDN

 Understanding CSS Filter Effects-html5rocks

エフェクト関数
処理

対応ブラウザ

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()
カスタム用
詳細
webkit,mozilla


サンプルコード

 最後に、今回作成したサンプルのソースを開示しますので、興味ある方がいましたら、実際に動かして、filterプロパティのエフェクトを実感してみて下さい。

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
@charset "UTF-8";
body {
font-family: "メイリオ",meiryo;
}

.floatcontainer:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.floatcontainer {
display: inline-block;
}

/* Hides from IE Mac */
* html .floatcontainer {height: 1%;}
.floatcontainer {
display:block;
}
/* End Hack */
.social_buttons {
list-style: none;
}
.social_buttons li {
float: left;
}
.field label {
display: inline-block;
width: 200px;
}
#sample {
background-color: #9933FF;
width: 65%;
padding: 8px;
}
fieldset {
border: none;
}
#wrapper{
width:640px;
margin: auto 0;
text-align:center;
}
fieldset {
border: none;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$('input[type="range"]').change(function() {
var range = this;
var fx = range.id;
var unit = range.dataset.unit || 'px';
var value = range.value + unit;
$('#sample').css('filter', fx + '(' + value + ')'); // 標準CSS3向け
$('#sample').css('-webkit-filter', fx + '(' + value + ')'); // Google Chrome,Safari向け
$('#sample').css('-moz-filter', fx + '(' + value + ')'); // Firefox向け
$('#sample').css('-o-filter', fx + '(' + value + ')'); // Oper向け
$('#sample').css('-ms-filter', fx + '(' + value + ')'); // Internet Explorer向け
showCurrentValue(this, value);
}).each(function() {
var range = this;
var unit = range.dataset.unit || 'px';
var value = range.value + unit;
showCurrentValue(this, value);
});

function showCurrentValue(range, value) {
var $range = $(range);
var result = $range.siblings('.current-value');
result.text('[' + value + ']');
}
});
</script>

</head>
<body>

<div id="wrapper">
<div id="sample">
<img src="sample.jpg" alt="サンプル" height="320px">
</div>
</div>
<fieldset>
<div class="field">
<label for="blur">blur:ぼかし</label>
<input type="range" id="blur" value="0" min="0" max="10" data-unit="px">
<span class="current-value"></span>
</div>
<div class="field">
<label for="grayscale">grayscale:モノクロ</label>
<input type="range" id="grayscale" value="0" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="sepia">sepia:セピア</label>
<input type="range" id="sepia" value="0" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="saturate">saturate:彩度</label>
<input type="range" id="saturate" value="100" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="hue-rotate">hue-rotate:色相回転</label>
<input type="range" id="hue-rotate" value="0" min="0" max="360" data-unit="deg">
<span class="current-value"></span>
</div>
<div class="field">
<label for="invert">invert:階調反転</label>
<input type="range" id="invert" value="0" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="opacity">opacity:透過度</label>
<input type="range" id="opacity" value="100" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="brightness">brightness:明るさ</label>
<input type="range" id="brightness" value="100" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="contrast">contrast:コントラスト</label>
<input type="range" id="contrast" value="100" min="0" max="100" data-unit="%">
<span class="current-value"></span>
</div>
<div class="field">
<label for="drop-shadow">drop-shadow:影</label>
<input type="range" id="drop-shadow" value="0" min="0" max="10" data-unit="px 0px 10px #000">
<span class="current-value"></span>
</div>
</fieldset>
</body>
</html>