【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる

filterとは？

ぼかしや色変化などのグラフィック効果を適用することができます。

以下のボタンをクリックしてみてください。

filterの各種指定方法

bluer

bluerは画像のぼかしを表現します。カッコのなかは--pxで指定します。

 .buler{
    filter: buler(1px);
    filter: buler(3px);
    filter: buler(5px);
  }

brightness

画像の明るさを明るくしたり暗くしたりします。 0%に設定すると、真っ黒の画像が作成されます。 100%に指定すると、画像は変化しません。 100% を超えると、より明るくなります

 .brightness{
    filter: brightness(50%);
    filter: brightness(80%);
    filter: brightness(130%);
  }

contrast

0%に指定するとグレーの画像が作成されます。 100%に指定すると、画像は変化しません。 100% を超える値を指定すると、よりコントラストの高い画像が作成されます。

 .contrast{
    filter: contrast(50%);
    filter: contrast(80%);
    filter: contrast(130%);
  }

drop-shadow

画像の境界に影を表すことができます。書き方はbox-shadowと同じです。
filter: drop-shadow(縦 横 ぼかし 色)

 .drop-shadow{
    filter: drop-shadow(5px 5px 5px blue);
    filter: drop-shadow(-5px -5px 5px green);
    filter: drop-shadow(10px 10px 10px red);
  }

grayscale

0% では画像が変化しません。100% に指定すると画像は完全にグレーになります。

 .grayscale{
    filter: grayscale(30%);
    filter: grayscale(50%);
    filter: grayscale(100%);
  }

hue-rotate

画像の色相を回転させます。 0-360degの間で指定します。360degは最初に戻り、画像は変化しません。

 .hue-rotate{
    filter: hue-rotate(90deg);
    filter: hue-rotate(180deg);
    filter: hue-rotate(270deg);
  }

invert

0% では画像が変化しません。100%に指定すると、完全に反転されます。

 .invert{
    filter: invert(30%);
    filter: invert(60%);
    filter: invert(100%);
  }

saturate

画像の彩度を変化させます。 0% に指定すると、無彩色になります。 100% では画像が変化しません。100% を超える値を指定することもでき、彩度を増すことができます。

 .saturate{
    filter: saturate(50%);
    filter: saturate(80%);
    filter: saturate(130%);
  }
    

sepia

画像をセピア調にします。 0% では画像は変化しません。100% に指定すると、完全にセピア調になります。

 .sepia{
    filter: sepia(30%);
    filter: sepia(50%);
    filter: sepia(100%);
  }

まとめ

CSSのfilterについて解説しました。使いこなして、画像をより魅力的にしましょう！