画像編集ソフトを使わずCSSだけで画像をグレーにできる

存在は知っていたもの、使ったことなかった、CSSのFilterプロパティ

使ってみたらめっちゃ面白かった

（※でも非対応ブラウザ多し）

ブログのデザインをグレー階調にしたくて、デザイン変更をしていたのだけど、画像をグレーにするには・・・と思ったら、スタイルでFilterを指定してやれば一発だったのです。（なんでグレーにしようと思ったのかというと、スマホの画面で、読み込み中などの画面変遷時に一瞬グレーになるのが、なんかいいなと思ったからなですが）

例えば、下記の画像（毎度おなじみ、無料素材の茜さやちゃんですね）



これに、

style="filter:grayscale(100%);"

を指定すると



CSSの指定だけでグレーになっちゃいました。

さらに、括弧内の数値を変える事で、掛かり具合を設定できるのです。

グレースケールだけでなく、フィルターには他にもいろいろな効果があります。 セピア(sepia)

輝度(brightness)

ぼかし(blur)

コントラスト(contrast)

影(drop-shadow)

色相回転(hue-rotate)

ネガポジ反転(invert)

透明度(opacity - 25%)

彩度(saturate)

---

複数のフィルターは並べて記述してしまってよいようです。

filter: contrast(175%) brightness(3%);

フィルターなし

filter: none;

---

※対応していないブラウザでは効果がありません。未だ対応していないブラウザも多く、ベンダープレフィックスが必要なケースも多いようです。

「Firefox66」「Google Chrome65」では、セピアだけ、ベンダープレフィックスが必要でした。

IE11、Android版のブラウザ各種では、ベンダープレフィックスを付けても一切画像に変化ありませんでした。（Chromeだけはグレースケールだけ機能）

img.sepia50{ filter:sepia(50%); -webkit-filter:sepia(50%); /* for Google Chrome and Safari */ -moz-filter:sepia(50%); /* for Firefox */ -o-filter:sepia(50%); /* for Oper */ -ms-filter:sepia(50%); /* for Internet Explorer */

---

これが使えると、画像をグレーにしておいてマウスオーバーで画像をカラーにするのも、グレーの画像を別途用意しなくても実現できますね。(ブラウザが対応していればですが。)

マウスオーバーで光るような演出も可能

---

書いていて気が付きました、これ、直接画像タグに指定しなくても、それを含む領域でも中の画像に影響があるんですね。

それと、画像だけでなく、文字にも影響があるΣ(・o・)

画像専用のプロパティではないんですね。

ということは、bodyタグに指定してやれば、サイト全体に影響を与えられるということか？！(^^;)
⇒ちょっとセピアにしてみたらなった！(笑)
でも、これはこれで面白いけれど、全ての要素がセピア色になって解除できないので（画像の解説がカラーでないと分からなくなってしまうので）戻します。。。
領域に指定するとすべてに影響があるのか？時間がある時にもうちょっと検証してみます。。。

⇒ 試してみました

---

面白いのは、この機能は動画にも作用するようです。

なるかな？↓

上から順に「グレースケール」「階調反転」「70%セピア」

白黒はなんか格好いいですね。ネガポジ反転はちょと怖い・・・(笑)
セピアはもとから動画にそれっぽい効果が掛かっているものが多く、あまり意味がない感じですね。。。

---

さらには、広告にも影響があることが判明。サイト全体の画像をグレーにしてしまうと、広告もグレーに・・・（ただ、広告はグレーになるものとならないものがありました。表示の方法によって違うのでしょうか？）

ただ、広告の色が変わってしまうのは、規約違反になる場合もあるかも知れませんので、どうしてもやりたい人はよく確認したほうがよいかも。