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

   

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

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

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

サンプル

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

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

CSS

HTML

参考

http://bitzedge.net/tips/grayscale
http://obomemo.com/web/css3-filter/

終わり