CSSの「filter」で画像をグレースケール・セピア・ぼかし処理
今までPhotoshopなどで調整していた
画像のぼかしやグレースケール処理を
CSSの「filter」で行えます。
※ですが残念ながら「filter」は
Internet Explorerが対応しておりません(#ﾟДﾟ)
画像をグレースケールにする：grayscale()
|
1 2 3 |
img { filter: grayscale(100%); } |
0％（原色）～100％（完全なグレー）
DEMO
セピアがかった色合いにする：sepia()
|
1 2 3 |
img { filter: sepia(100%); } |
0％（原色）～100％（完全なセピア）
DEMO
画像にぼかしをかける：blur()
|
1 2 3 |
img { filter: blur(1px); } |
0px（原色）～
値大きくなるほど、ぼかしの度合いが強くなります。
いろいろな長さの単位で指定できます。
「％」の指定はできません。
DEMO
「transition」と合わせてアニメーションしてみる
グレースケールからロールオーバー時に原色に戻す処理を作成してみます。
|
1 2 3 4 5 6 7 8 9 |
img { -webkit-filter: grayscale(100%); transition: 0.5s linear; } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } |
DEMO
↓画像にカーソルを乗せると原色に戻ります。
その他のfilter
他にも様々なfilterがあります。
- 画像の明るさを調整する：brightness()
- 画像のコントラストを調整する：contrast()
- 画像の色の彩度を調整する：saturate()
- 画像の色相反転：hue-rotate()
- 画像の階調反転：invert()
- 画像を半透明にする：opacity()
- 画像にドロップシャドウ効果をかける：drop-shadow()
Internet Explorerが未対応で残念ですが
JavaScriptや複数の画像を用意する必要がなく
使い所によっては非常に便利です。
========================
▼参考にさせていただきました。ありがとうございます。
https://iholdings.jp/archives/2917
https://nakazilab.com/only-css-gray-scale/
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
