【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について解説しました。使いこなして、画像をより魅力的にしましょう!
filterは画像をぼかしたり、色の変化を適用させることができる。
blur:ぼかし
brightness:輝度
cantrast:明暗差、画像にメリハリをもたせる
drop-shadow:画像の右下または左上に影
grayscale:グレースケール
hue-rotate:色相回転
invert:諧調反転、画像をネガのようにできる。
saturate:彩度
sepia:セピア調に調整