Photoshopを使って画像をモノクロにしたり、色相・彩度を調整してみたりって
何気に手間がかかったりしますよね。
今は便利になったもので、CSSだけで簡単なフィルター効果なら加えることができるんです。
これが加工前のオリジナル写真になります。
グレースケール
画像のグレースケールの値を調整できます。
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
セピア
画像のセピアの値を調整できます。
-webkit-filter: sepia(100%);
filter: sepia(100%);
彩度
彩度を調整できます。
初期値が100%となりますので、今回は彩度300%にしてみます。
-webkit-filter: saturate(300%);
filter: saturate(300%);
ぼかし
ぼかしの値を調整できます。px数でぼかし具合を変更できます。
-webkit-filter: blur(2px);
filter: blur(2px);
階調の反転
0~100%で画像の階調を反転できます。
-webkit-filter: invert(100%);
filter: invert(100%);
思ったより短い記述でフィルター効果が加えられますね。
(ここで紹介した以外にも色んなフィルター効果があります)
Photoshopを立ち上げずにサクッと加工したい方や、プログラマーの方などはぜひ活用してみてはいかがでしょうか。
by デザイナー瀬戸