CSSのfilterプロパティで画像をおしゃれに変更してみよう！

あらすじ

みなさん、CSSにfilterというプロパティがあるのはご存知でしたでしょうか。

実は自分もつい最近までこのプロパティがあることを知らなかったです(笑)

このfilterプロパティとは、透明度やぼやかし、明るさ、コントラストといった、画像に様々な変化を加えることができるもので、Photoshopを使ってしかできないと思っていた画像の追加効果をCSSだけで実装できてしまうのです。

これを知った時は正直驚きを隠せず(笑)

ある程度CSSの知識に関しては熟知しているつもりだったのですが、こんな便利でおしゃれな機能がCSSにあったとは。

今回はそんなCSSのfilterプロパティについて詳しくご紹介していきたいと思います。

CSSのfilterプロパティとは

CSSのfilterプロパティとは上記でも軽く説明した通り、PhotoshopやPhotopeaなどの画像用編集ツールを使用しなくても、画像に様々な特殊効果をもたらすことができるプロパティです。

基本的な書き方は、変更したい画像のclass名やid名などのセレクタ名を指定しfilterプロパティとその値を書くだけです。

実際のコードは下記のようになります。

img {
     filter: blur(5px); 
}

()内にはそれぞれの値に沿った数値を入力します。

詳しくは後ほど解説いたします。

CSSのfilterプロパティへの対応ブラウザは？

このfilterプロパティにはどのブラウザが対応しているのでしょうか。

ブラウザに関してわからない方は先にこちらの記事をご覧ください。↓

合わせて読みたい

筆者が選ぶおすすめのwebブラウザ5選!Chrome,safari,firefox,ieなど

2019.5.23

あらすじ 今やインターネットはなくてはならない存在となりました。 そんな便利な時代である現在では、多くの人がインターネットを利用して有益な情報を検索したり、webサイト、webページといったものを見ています。 そんなwebサイトやwebページを見る上で欠かせないものがweb browser(ウェブブ...

基本的には下記のブラウザでは対応しています。

※それぞれのバージョン以前でもプロパティの前に-webkit-を付属すれば使用できます。

※Microsoft Edge 12.0とInternet Explorer には対応していません。

CSSのfilterプロパティにはどのような種類があるの？

CSSのfilterプロパティには主に10種類あります。

それぞれについて詳しくみていきましょう。

blur()

このblurは画像にぼやかし効果を与えることができます。

数値はpx(ピクセル)で適用します。

px(ピクセル)が大きければ大きいほど画像をぼやかすことができます。

img {
    filter: blur (5px);
}

brightness()

brightnessは画像の明るさを変更することができます。

数値は%(パーセンテージ)で適用します。

0%は画像を完全な黒の状態にすることができ、100%で元の画像の明るさ、100%以上(例：110%, 200%)で元の画像より明るくすることができます。%(パーセンテージ)が上がるにつれてより明るくなります。

img {
    filter: brightness (200%);
}

contrast()

contrastは画像のコントラストを変更する際に入力する値です。

こちらの数値はbrightness同様%(パーセンテージ)で適用でき、0%で完全な黒、100%で元画像、それ以上でコントラストを増やすことができます。

img {
    filter: contrast (200%);
}

drop-shadow()

drop-shadowは、画像に影の効果を付け加えることができます。

数値はpxで表し、最後に色を決めることができます。

下の例では、最初の数値5pxが水平方向に、次の5pxが垂直方向、3つ目の8pxがぼやかし効果、そして最後のgreenが影の色を表しています。

img {
    filter: drop-shadow (5px, 5px, 8px, green);
}

※このdrop-shadowはCSSのbox-shadowプロパティとほぼほぼ同じです。

grayscale()

grayscaleは画像を白黒に変更することができます。

数値は%(パーセンテージ)で、0%で元の画像、100%で完全な白黒に変更することができます。

img {
    filter: grayscale (100%);
}

hue-rotate()

hue-rotateは画像の色合いを逆にする際に使用する値です。

数値は角度を表す(deg)で適用し、最高値は360degになります。

img {
    filter: hue-rotate (180deg);
}

invert()

invertは画像の色を反転する際に使用する値です。

数値は%(パーセンテージ)で適用します。

0%が元の画像で、100%で色が完全に反転します。

img {
    filter: invert (100%);
}

opacity()

opacityは透明度を変更することができる値です。

こちらも%(パーセンテージ)で数値を決めることができます。

0%で完全に透明にすることができ、100%で元の画像の透明度に戻すことができます。

img {
    filter: opacity (50%);
}

※CSSのopacityとほぼほぼ同じです。

saturate()

saturateは画像の彩度を変更する際に使用します。

数値は%(パーセンテージ)です。

0%は彩度が最低限まで下がった状態で、100%が元画像、それ以上で彩度をあげることが可能となっています。

img {
    filter: saturate (100%);
}

sepia()

sepiaは画像をセピア色に変更することができます。

数値は%(パーセンテージ)を適用します。

0%で元画像、100%で完全なセピア色に変更できます。

img {
    filter: sepia (100%);
}

実際にCSSのfilterプロパティを使ってみると

オリジナル画像

上記で記載した実際のコードを画像にしてみると、下のようになります！

合わせて読みたい

CSSプロパティのoverflowとは？hiddenやscrollの意味についても！

2019.9.22

あらすじ 皆さんoverflowプロパティとはご存知でしょうか。 といった方に向けて、今回はoverflowプロパティとはどのようなものなのかをご紹介していきたいと思います。 具体的には、 overflowプロパティとは overflowプロパティの値 overflow-xとoverflow-...

まとめ

いかがだったでしょうか。

PhotoshopやPhotopeaなども便利なツールですが、使い方に慣れてない方や、使うのが億劫といった方にはこのCSSのfilterプロパティはかなりおすすめと言えるのではないでしょうか。

ぜひとも試してみてください。^^

合わせて読みたい

超便利!cssで簡単にwebページのレイアウトができるflexboxの使い方!

2020.4.24

あらすじ みなさんflex-boxとはご存知ですか。 コーディング経験者や勉強中の方は、一度は耳にしたことがあるはずです。 ただ、 なんか難しいそう 使う気にならない 名前は知ってるけどなんだかよくわからない と、なかなか実際に使うまでに至ってない方もいるのではないでしょうか。 そんな方達に伝え...