Help us understand the problem. What is going on with this article?

CSSフィルタことはじめ

More than 5 years have passed since last update.

CSSフィルタサンプル作成

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

CSSフィルタデモ

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

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

CSSフィルタ
filter:sepia(100%);

セピア100%の画像はこんな感じになります。
CSSフィルタデモ

対応ブラウザ

 最近、対応するブラウザが増えてきてはいますが、ベンダープレフィックスなしでは動作しないみたいです。私も念のため、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>
bluebird
セキュリティ全般に興味があります。
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした