CSS3のフィルターを色々試してみる

filterでぼかしたりを色調を変更したりできるのは知っていましたが、あまり仕事で使う機会がなかなか無いので、使い方を調べてみました。

対応ブラウザ

filterの対応ブラウザはこちら。
IEでは今のところは非対応、chromeなどでもベンダープレフィックス(-webkit-)が必要です。
今回は試しませんが、url()でSVGフィルタを指定することでIEは一部対応ができるみたいです。

サンプルコード

HTML

<p>blur(5px)</p>
<ul>
	<li><img src="img01.jpg" width="480" height="320" alt="" /></li>
	<li><img class="blur" src="img01.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>brightness(0.6)</p>
<ul>
	<li><img src="img02.jpg" width="480" height="320" alt="" /></li>
	<li><img class="brightness" src="img02.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>contrast(200%)</p>
<ul>
	<li><img src="img03.jpg" width="480" height="320" alt="" /></li>
	<li><img class="contrast" src="img03.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>drop-shadow(5px 5px 10px #333333)</p>
<ul>
	<li><img src="img04.jpg" width="480" height="320" alt="" /></li>
	<li><img class="drop-shadow" src="img04.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>grayscale(100%)</p>
<ul>
	<li><img src="img05.jpg" width="480" height="320" alt="" /></li>
	<li><img class="grayscale" src="img05.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>hue-rotate(120deg)</p>
<ul>
	<li><img src="img06.jpg" width="480" height="320" alt="" /></li>
	<li><img class="hue-rotate" src="img06.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>invert(100%)</p>
<ul>
	<li><img src="img07.jpg" width="480" height="320" alt="" /></li>
	<li><img class="invert" src="img07.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>opacity(40%)</p>
<ul>
	<li><img src="img08.jpg" width="480" height="320" alt="" /></li>
	<li><img class="opacity" src="img08.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>saturate(20%)</p>
<ul>
	<li><img src="img09.jpg" width="480" height="320" alt="" /></li>
	<li><img class="saturate" src="img09.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>sepia(100%)</p>
<ul>
	<li><img src="img10.jpg" width="480" height="320" alt="" /></li>
	<li><img class="sepia" src="img10.jpg" width="480" height="320" alt="" /></li>
</ul>
<p>blur(10px) hue-rotate(280deg)</p>
<ul>
	<li><img src="img11.jpg" width="480" height="320" alt="" /></li>
	<li><img class="multiple" src="img11.jpg" width="480" height="320" alt="" /></li>
</ul>

CSS

.blur {
	filter: blur(5px);
	-webkit-filter: blur(5px);
}
.brightness {
	filter: brightness(0.6);
	-webkit-filter: brightness(0.6);
}
.contrast {
	filter: contrast(200%);
	-webkit-filter: contrast(200%);
}
.drop-shadow {
	filter: drop-shadow(5px 5px 10px #333333);
	-webkit-filter: drop-shadow(5px 5px 10px #333333);
}
.grayscale {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
.hue-rotate {
	filter: hue-rotate(120deg);
	-webkit-filter: hue-rotate(120deg);
}
.invert {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}
.opacity {
	filter: opacity(40%);
	-webkit-filter: opacity(40%);
}
.saturate {
	filter: saturate(20%);
	-webkit-filter: saturate(20%);
}
.sepia {
	filter: sepia(100%);
	-webkit-filter: sepia(100%);
}
.multiple {
	filter: blur(10px) hue-rotate(280deg);
	-webkit-filter: blur(10px) hue-rotate(280deg);
}

フィルターのデモページ
　

【参考サイト】

• filter – CSS | MDN
• CSS3のフィルター効果をまとめた | おぼめも