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

CSS

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

2019年10月30日 8:00 

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

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

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

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

 



 

CSSのfilterプロパティを使って画像をモノクロに

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

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

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

 

表示

 

ソース

 

 



モノクロからもとの状態にもどす方法

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

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

 

ソース

 

 

モノクロ具合を調整してみる

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

 

表示

 

ソース

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!