CSSフィルター:画像をグレースケールにする

goto_jp 1,328views 更新:2014年5月2日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/tqDKv

CSS3はフィルターで画像の色を制御できます。

CSS

filter: grayscale(100%);

グレースケールを100%適用するという意味で、100%に近いほどグレースケールの度合いが強まります。
サンプルでは hover 時に0%を指定することでマウスオンで色を戻すようにしています。

相変わらずIEはお察しで、手間のかかる方法でグレースケールに出来ないことはありませんが、今回は純粋にCSSフィルターのご紹介のみということで…

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません