CSSで画像に白黒やセピアなどの効果をかける方法
白黒やセピア色など、エフェクトを加えた画像は、
今まではPhotoshopなどで効果をつけたものを作成してアップするのが普通でしたが、最近ではCSSで直接効果を加えることができるようになりました。
まずはデモをご覧ください。
サンプル
方法はいたって簡単で、CSS3のフィルター効果を画像に適用するだけです。
数値による調整ができるので、画像に合わせて効果を調整できるのが嬉しいですね。
画像に適用できるフィルター効果は、グレースケール、セピア、明るさ、コントラスト、彩度、透過、ドロップシャドウ、色相、ブラー、階調の反転、などとなります。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<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
終わり
Follow me!
