画像効果を付けることができるCSSプロパティ「filter」

こんにちは、hgmです！

今回は画像効果を付けることができるCSSプロパティ「filter」についてご紹介します。

色味を変えたりぼかしたりするときはPhotoshopで事前に画像を加工されている場合がほとんどですが、CSSのfilterを使用すればWEB上でも効果をつける事が可能です。

色んな効果があるのでデモを見ていきましょう✨

下記画像を基に使用しています。

関数の種類

blur()

ガウスぼかしを適用します。

指定はCSSの長さですが、%での指定はできません。

filter: blur(5px);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

brightness()

画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。

指定する値0％は完全な黒になり、100％は元の状態になります。
明るくする場合は、100％以上の値で指定しましょう。

filter: brightness(150%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

contrast()

画像のコントラストを調整します。

指定する値は0％は完全なグレー画像になり、100％は元の状態になります。
コントラストを高くする場合は、100％以上の値で指定しましょう。

filter: contrast(150%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

drop-shadow()

ドロップシャドウ（画像枠に影）効果を適用します。

引数はx（水平の距離）、y（垂直の距離）、ぼかしの距離（オプション）、カラー（オプション）です。

filter: drop-shadow(5px 5px 10px black);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

grayscale()

画像をグレースケールに変換します。

指定する値は100％は完全グレースケールになり、0％は元の状態になります。

filter: grayscale(100%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

hue-rotate()

画像の色相を回転させます。

指定する値は0degは回転なしで、360degを超える場合は回り込みになります。

filter: hue-rotate(180deg);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

invert()

画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることができます。

指定する値は100％で完全に反転し、0％は元の状態になります。

filter: invert(100%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

opacity()

画像に透過度を適用します。

指定する値は0％で完全に透明化し、100％は元の状態になります。

filter: opacity(30%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

saturate()

画像の彩度を変化させます。

指定する値は0％で無彩色になり、100％は元の状態になります。

filter: saturate(30%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

sepia()

画像をセピア調にします。

指定する値は100％で完全にセピア調にし、0％は元の状態になります。

filter: sepia(100%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

関数の組み合わせ

関数は下記のように組み合わせて使用することができます！

filter: brightness(130%) contrast(120%);

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

まとめ

様々な種類のフィルターの組み合わせが可能なので、クラスを作成しブログの画像に適用すれば一々画像加工する手間が省けそうですね！

おしゃれなフィルターを付けたい場合は、下記記事がおすすめです！

ゆにメモ

CSSでインスタグラム風のフィルターが実装できる「Instagram.css」

https://blog.universe-web.jp/2491

おはようございます！社員Aです👩今回はCSSでインスタグラム風のフィルターが実装できる「Instagram.css」をご紹介します。 Photoshop要らず!? CSSでインスタグラム風のフィルターを実装Instagramに入っているフィルタを使うと、素人が撮った写真でもそれっぽくおしゃれに仕上がりますよね！今回ご紹介する「Instagram.css」を使うと、下記のようにCSSだけで写真をインスタ風におしゃれに加工できます。上記は一例ですが、なんと全部で40種類以上のフィルタが使えます。iPhoneやスマホで撮った写真でもこのスタイルシート...