コンパイラかく語りき

import { Fun } from 'programming'

CSSだけで画像をグレーアウトさせる方法

どうも!chuckです。

今回はCSSだけで画像をグレーアウトさせる方法について書いていきます。

 

 

filterプロパティを使う

filterプロパティを使えばカンタンに画像をグレーアウトさせることができます。

 

DEMO1

この画像にカーソルを合わせると、

f:id:chuck0523:20150716075152p:plain

 

グレーアウトします。

f:id:chuck0523:20150716075223p:plain

http://chuck0523.github.io/front-end-coding/grayoutImage/index1.html

 

コード

gistca22cc3b8e76d8cb5e66

 

DEMO2

また、ありがちな実装として、ECサイトで売り切れ商品のみグレーアウトしたいなんていう要望もあるかと思います。

そのときはグレーアウトしたい商品用にクラスを作ればOKです。

f:id:chuck0523:20150716075409p:plain

バナナにだけsoldoutというグレーアウト用のクラスをつけています。

http://chuck0523.github.io/front-end-coding/grayoutImage/index2.html

 

コード

gist4fb7815e4414ead05fd7

 

まとめ的な

通常の画像とグレーアウトした画像の2種類を用意しなければいけないところを、CSSでグレーアウトを実現することにより、画像が少なく済みます。なかなか便利ですよね!

ぜひ、みなさんもつかってみてくださいヽ(=´▽`=)ノ

 

参考にしたサイト様

bitzedge.net

 

kachibito.net

 

qiita.com