CSS
CSSだけで画像をモノクロにするテクニック【簡単】
2019年10月30日 8:00
おはようございます！社員Aです👩
今回はCSSだけで画像をモノクロにするテクニックをご紹介します。
ホバーエフェクトとして導入されていることも多く、そういったシーンでも活用できます。
CSSのfilterプロパティを使って画像をモノクロに
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です。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
