▲TOPへ戻る

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

filterとは?

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

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

bluer
(ぼかし)
brightness
(輝度)
contrast
(明暗差)
drop-shadow
(影)
grayscale
(グレースケール)
hue-rotate
(色相回転)
invert
(諧調反転)
saturate
(彩度)
sepia
(セピア)

filterの各種指定方法

bluer

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

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

brightness

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

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

contrast

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

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

drop-shadow

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

50% ネコ
80% ネコ
130%ネコ
 .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% に指定すると画像は完全にグレーになります。

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

hue-rotate

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

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

invert

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

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

saturate

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

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

sepia

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

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

まとめ

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

point

filterは画像をぼかしたり、色の変化を適用させることができる。

blur:ぼかし

brightness:輝度

cantrast:明暗差、画像にメリハリをもたせる

drop-shadow:画像の右下または左上に影

grayscale:グレースケール

hue-rotate:色相回転

invert:諧調反転、画像をネガのようにできる。

saturate:彩度

sepia:セピア調に調整

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<