この記事では、CSSだけで画像を白黒にする方法を紹介します。
サイトやブログに載せる画像を加工するのにPhotoshopなどの画像編集ソフトを使っている人も多いと思いますが、CSSだけでもある程度画像を加工することは可能です。
すごく簡単な方法なので、覚えておいて損はないはず。
さっそく見ていきましょう！
「filter」を使ってCSSで画像を白黒にする
それではさっそく、CSSを使って簡単に画像を白黒にする方法を解説していきます。
サンプルとして用意したのはこちらの色鉛筆の画像。
この画像をCSSを使って白黒にします。
まず、htmlコードはこちら。
分かりやすく「shirokuro」というclassをつけています。
<img class="shirokuro" src="/xxx.jpg">
cssコードはこちら。
.shirokuro {
filter: grayscale(100%);
}
これだけのシンプルなCSSで画像はこのとおり白黒になります。
使っているのはCSSのfilterという機能。
filterを使うと画像の表示方法を変更することができ、ここでは画像をグレースケールに変換する「grayscale関数」を使っています。
grayscale関数は%で指定します。
上記コードの「100%」の数値を変えることで白黒フィルターの変換の度合いを調整できます。
マウスオーバーで画像が白黒に切り替わるようにするCSS
それではつぎに応用として、マウスオーバーすると画像が白黒に切り替わるCSSを紹介します。
サンプルとして、こちらの外国の街並みの写真を用意しました。
まず、htmlコードはこちら。
今度は「shirokuro-h」というclassをつけています。
<img class="shirokuro-h" src="/xxx.jpg">
cssコードはこちら。
先ほどとの違いは、マウスオーバー時の動作を設定する「:hover」を付け加えただけです。
.shirokuro-h:hover {
filter: grayscale(100%);
}
結果はこちら。
マウスオーバーすると白黒になるはずです。
CSS filterの関数一覧
この記事で画像を白黒にするのに使ったのは画像をグレースケールに変換する「grayscale関数」ですが、filterの関数は他にもあります。
filter関数の一覧を紹介します。
contrast()
画像のコントラスト調整する。%で指定。100%が基準値。
blur()
画像をぼかす。pxやremで数値を指定。
brightness()
画像を明るさを調整する。%で指定。100%が基準値。
drop-shadow()
画像にドロップシャドウをつける。
hue-rotate()
画像の色相環を回転する。degで角度を指定。
invert()
画像の色を反転する。%で指定。
opacity()
画像を半透明にする。%で指定。
saturate()
画像の彩度を調整する。%で指定。
sepia()
画像をセピア色にする。%で指定。
これらの関数は単独で使ってもいいですし、
「filter: grayscale(100%) contrast(150%);」というふうに組み合わせて使うこともできます。
各関数については、機会があれば別の記事で詳しく紹介します。
おわりに
以上、CSSだけで簡単に画像を白黒にする方法を紹介しました。
CSSのfilter機能をうまく使いこなせば、Photoshopなどの画像編集ソフトで加工するのと同じような表現も簡単にできるようになります。
ぜひ参考にしてみてくださいね！
