白黒やセピア色など、エフェクトを加えた画像は、
今までは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%); }
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>
参考
http://bitzedge.net/tips/grayscale
終わり