CSSだけで画像をモノクロにするテクニック【簡単】

CSS

2019年10月30日 8:00　

おはようございます！社員Aです👩

今回はCSSだけで画像をモノクロにするテクニックをご紹介します。

ホバーエフェクトとして導入されていることも多く、そういったシーンでも活用できます。

CSSのfilterプロパティを使うことで簡単に画像をモノクロにできます。

filterプロパティはモノクロ以外にも画像の色合いを簡単に変えることができるので、わざわざPhotoshopなどで色を変えなくてもいいのが便利ですね。

実際にfilterプロパティを使って画像をモノクロにしていきましょう。

img{
	filter: grayscale(100%);
}

hoverエフェクションなどで、カーソルを当てたときにもとの画像の色味に戻したい場合は下記の記述でできます。

単純に100%だったものを0%にするだけです。

img{
	filter: grayscale(0%);
}

数値を変えるだけで、モノクロ具合を好みで調整できます。

img.mono_1{
	filter: grayscale(100%);
}
img.mono_2{
	filter: grayscale(60%);
}
img.mono_3{
	filter: grayscale(30%);
}

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺