【Photoshopの効果をCSSだけで】filterプロパティ

今回はCSSのfilterプロパティの使い方についてまとめたいと思います。

filterプロパティは、
CSSプロパティの1種で、CSSだけで画像加工効果を加えることができるのが特徴です。

個人的によく使いそうな4種類をピックアップして紹介してみます。

1：grayscale(白黒)

「grayscale」を使うと、画像をモノクロにすることができます。

See the Pen
RwrrmQP by notebook (@orange-notebook)
on CodePen.

img {
  filter: grayscale(100%);
} 

100%で完全な白黒写真になりました。

2：brightness (明度)

「brightness」を使うと、画像の明度を調整することができます。

See the Pen
QWyyRrq by notebook (@orange-notebook)
on CodePen.

img {
  filter: brightness(150%);
}

150%にしたところ、かなり明るさが出ています。

3：sepia(セピア)

「sepia」を使うと、画像をセピア色に変換することができます。

See the Pen
abddrGX by notebook (@orange-notebook)
on CodePen.

img {
  filter: sepia(50%);
}

50%かけていますが、セピアの独特の雰囲気が出ています。

4：blur(ぼかし)

「blur」を使うと、画像にぼかしをかけることができます。

See the Pen
VweeOdw by notebook (@orange-notebook)
on CodePen.

img {
  filter: blur(5px);
}

5pxでかなりのぼかし効果がありますね。

同じ写真でそれぞれの効果を比較できると楽しいですね。

ちなみに何も効果をかけていないと、下記のようなかんじになります。

See the Pen
abddrXx by notebook (@orange-notebook)
on CodePen.

filterは使いこなすとCSSだけでサイトの雰囲気をかなり変えられそうですね！
他にも値の種類があるのでいろいろ試してみると楽しそうです。

以上、filterプロパティの使いかたでした。