CSSで画像をグレースケールに!!

投稿者: Pey - 2013/12/11 - Tips

ブログを初めて約1ヶ月。毎日わからないことや新たな発見があり、刺激のある毎日を送ってますが、今回は個人メモということで1つ記事を。

ブログ内の画像をCSSだけでグレースケールにすることができるという、もしかしたら誰でも知っているのか?!もしれないが、発見したのでメモってみる!!

CSSフィルタってすごい!!

参考にさせていただいたサイトがこちらの2つ

僕は普段から画像を使用したりしているが、画像ってアップロードしたものを後からいじったりすることができないものだとばかり思っていた。

が、全くの見当外れで簡単にできちゃうそうだ。

CSSに以下のようなコードを入力。

img {
-webkit-filter: grayscale(1); /* Webkit */
filter: gray; /* IE6-9 */
filter: grayscale(1); /* W3C */
}

img {

-webkit-filter: grayscale(1); /* Webkit */

filter: gray; /* IE6-9 */

filter: grayscale(1); /* W3C */

}

grayscale(1)というところの(1)というのは100%という意味だそうなので、50%ぐらいにしたいなら0.5と記入すればいいそうだ。

その他grayscale(100%)やgrayscale(50%)とかでも問題なくできるみたいだ!!

上記のコードは画像をグレーにするというコードであるが、それ以外にも色んなフィルタをかけることができる。セピア色にしたり彩度や明るさ、コントラスト、ぼかしなど。詳しくはOpenWebさんのサイトで確認できる。

デモでいろいろ試したりするようにしてくれているのでかなりわかりやすい!!

そして画像を後からいじったりできるのはCSS以外にもJavaScript、SVGなどでもできるそうだ。

詳しくはHONGKIAT.comさん(英語)に載っている。

こちらに関しては僕の今の知識ではちょっと意味不明なので後々ゆっくり勉強させてもらうことにしよう。

image source:flickr.com