CSSで画像に白黒やセピアなどの効果をかける方法

白黒やセピア色など、エフェクトを加えた画像は、
今まではPhotoshopなどで効果をつけたものを作成してアップするのが普通でしたが、最近ではCSSで直接効果を加えることができるようになりました。

まずはデモをご覧ください。

サンプル

方法はいたって簡単で、CSS3のフィルター効果を画像に適用するだけです。
数値による調整ができるので、画像に合わせて効果を調整できるのが嬉しいですね。

画像に適用できるフィルター効果は、グレースケール、セピア、明るさ、コントラスト、彩度、透過、ドロップシャドウ、色相、ブラー、階調の反転、などとなります。

CSS

ul { display: flex; width: 800px; }
li { margin-right: 20px; list-style: none; text-align: center; }
img { width: 100%; }
.grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }
.sepia { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }
.brightness { -webkit-filter: brightness(2); -moz-filter: brightness(2); -o-filter: brightness(2); -ms-filter: brightness(2); filter: brightness(2); }
.contrast { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); -o-filter: contrast(200%); -ms-filter: contrast(200%); filter: contrast(200%); }
.saturate { -webkit-filter: saturate(30%); -moz-filter: saturate(30%); -o-filter: saturate(30%); -ms-filter: saturate(30%); filter: saturate(30%); }
.opacity { -webkit-filter: opacity(0.3); -moz-filter: opacity(0.3); -o-filter: opacity(0.3); -ms-filter: opacity(0.3); filter: opacity(0.3); }
.drop-shadow { -webkit-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -moz-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -o-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -ms-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); }
.hue { filter: hue-rotate(30deg); -webkit-filter: hue-rotate(30deg); -moz-filter: hue-rotate(30deg); -o-filter: hue-rotate(30deg); -ms-filter: hue-rotate(30deg); }
.blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
.invert { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); }

ul { display: flex; width: 800px; }

li { margin-right: 20px; list-style: none; text-align: center; }

img { width: 100%; }

.grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }

.sepia { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }

.brightness { -webkit-filter: brightness(2); -moz-filter: brightness(2); -o-filter: brightness(2); -ms-filter: brightness(2); filter: brightness(2); }

.contrast { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); -o-filter: contrast(200%); -ms-filter: contrast(200%); filter: contrast(200%); }

.saturate { -webkit-filter: saturate(30%); -moz-filter: saturate(30%); -o-filter: saturate(30%); -ms-filter: saturate(30%); filter: saturate(30%); }

.opacity { -webkit-filter: opacity(0.3); -moz-filter: opacity(0.3); -o-filter: opacity(0.3); -ms-filter: opacity(0.3); filter: opacity(0.3); }

.drop-shadow { -webkit-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -moz-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -o-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); -ms-filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, 0.5)); }

.hue { filter: hue-rotate(30deg); -webkit-filter: hue-rotate(30deg); -moz-filter: hue-rotate(30deg); -o-filter: hue-rotate(30deg); -ms-filter: hue-rotate(30deg); }

.blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }

.invert { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); }

HTML

<h3>グレースケール</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="grayscale">
グレースケール</li>
</ul>
<h3>セピア</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="sepia">
セピア</li>
</ul>
<h3>明るさ</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="brightness">
明るさ</li>
</ul>
<h3>コントラスト</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="contrast">
コントラスト</li>
</ul>
<h3>彩度</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="saturate">
彩度</li>
</ul>
<h3>透過</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="opacity">
透過</li>
</ul>
<h3>ドロップシャドウ</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="drop-shadow">
ドロップシャドウ</li>
</ul>
<h3>色相</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="hue">
色相</li>
</ul>
<h3>ブラー</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="blur">
ブラー</li>
</ul>
<h3>階調の反転</h3>
<ul>
<li><img src="img.jpg">
デフォルト</li>
<li><img src="img.jpg" class="invert">
階調の反転</li>
</ul>