Photoshop不要!CSSだけで画像にフィルター効果を加えてみる

Photoshopを使って画像をモノクロにしたり、色相・彩度を調整してみたりって
何気に手間がかかったりしますよね。

今は便利になったもので、CSSだけで簡単なフィルター効果なら加えることができるんです。

これが加工前のオリジナル写真になります。

flower

グレースケール

画像のグレースケールの値を調整できます。

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

flower02

セピア

画像のセピアの値を調整できます。

-webkit-filter: sepia(100%);
filter: sepia(100%);

flower03

彩度

彩度を調整できます。
初期値が100%となりますので、今回は彩度300%にしてみます。

-webkit-filter: saturate(300%);
filter: saturate(300%);

flower04

ぼかし

ぼかしの値を調整できます。px数でぼかし具合を変更できます。

-webkit-filter: blur(2px);
filter: blur(2px);

flower05

階調の反転

0~100%で画像の階調を反転できます。

-webkit-filter: invert(100%);
filter: invert(100%);

flower06

 

思ったより短い記述でフィルター効果が加えられますね。
(ここで紹介した以外にも色んなフィルター効果があります)

Photoshopを立ち上げずにサクッと加工したい方や、プログラマーの方などはぜひ活用してみてはいかがでしょうか。

by デザイナー瀬戸