CSSのフィルター、使い方。

CSSでCG効果。

こんにちは、「ふ」です。
今回はCSSのフィルターについて紹介します。

filterプロパティを利用することで、ぼかしや影、色の補正など、CSSだけで画像編集ソフトのような効果を与えることができます。

<img class = "sample" src = "sample.png">

.sample {
    filter:「「２none」」;
}

filterプロパティの初期値は「none(何もしない)」となっています。
以下に用意されている関数を値に指定すると、filerを掛けることができます。

当記事ではそれぞれの変化の仕組みについても解説しながら、各フィルターの使い方について紹介していきます。仕組みを理解しておくことで、アレンジの幅も広がることでしょう。

blur〜ぼかし。

blur関数は、要素にぼかし効果を与えます。

.element {
    filter:blur(「「２広がり範囲」」);
}

( )の値部分はぼかしの広がり範囲を指定します。

.sample {
    filter:blur(2px);
}

2pxのぼかしが掛かりました。

drop-shadow〜影。

drop-shadow関数は、不透明な部分に対して影を落とします。
影にぼかしを付けたり、影自体の色を指定したりもできます。

.element {
    filter:drop-shadow(「「２x方向 y方向 ぼかし 色」」);
}

( )の中の値ですが、１、２番目はxy方向のオフセット(元の位置からの距離)を指定します。

３つ目は影をぼかしを付けたいとき、その範囲を指定します。
また４つ目の値では影の色を指定することができます。

<img class = "no_back" src = "no_back.png">

先ほど使ったサンプルには透過部分が存在しないので、背景なしの画像を用意しました。

.no_back {
    filter:drop-shadow(2px 2px 5px blue);
}

x/yのオフセットが2px、ぼかし5px、blueの影が付きました。

サイズ値の記述について。

.element {
    filter:drop-shadow(「「２2px 2px」」 #00a0e9);
}

４つの値のうちオフセットとぼかし範囲については、大きさを指定する「サイズ値」です。
サイズ値を２つだけ記述しているときは、x/y方向のオフセットとして扱われます。ぼかしは発生しません。

.element {
    filter:drop-shadow(2px 2px 「「２5px」」 #00a0e9);
}

サイズ値を３つ指定すると、３つ目のものがぼかし範囲に適用されます。

.element {
    filter:drop-shadow(2px 「「２0px」」 5px #00a0e9);
}

ちなみにサイズ値１つではdrop-shadowは作用しません。どちらかの方向にオフセットを取りたくない、などのバヤイは「0px」と明記するようにしましょう。

.element {
    filter:drop-shadow(2px 2px 5px);
}

ちなみに。４つ目の色指定が明記されていないバヤイは、影の色はデフォルトの#000(完全な黒)で描画されます。

サイズ値で%はだめ。

.element_a {
    filter:drop-shadow(「「２2px 2vw 3px」」 #00a0e9);
}

.element_b {
    filter:blur(「「２5px」」);
}

blurのぼかし範囲や、drop-shadowの１〜３ばん目の値は「サイズ値」です。

サイズ値にはpxやvwなどの普段CSSで使っているものがそのまま使えますが、%だけは使う事ができません。CSSのフィルターはピクセル情報にもとづいて処理がなされる関係で、直接自身のサイズを参照できない仕様になっているのです。
以降で紹介している「サイズ値ではない%表記」については問題ありません。

drop-shadowの４ばん目の値である影の色に関しては、制限なく通常の色指定値を使用することができます。

opacity〜透過。

opacity関数は、不透明度を変化させ、要素を透過させることができます。

.element {
    filter:opacity(「「２0〜1」」);
}

値は0〜1で指定します。0にすると完全な透明に、1にすると完全な不透明（変化なし）となります。
単位は0〜1のほかに、0%〜100%で指定することもできます。

.sample {
    filter:opacity(0.5);
}

画像が半透明になりました。

invert〜RGB反転。

invertは、色調を反転させるフィルターです。

色調反転とは？
聞きなれない言葉ですが、つまりはR/G/B値それぞれが中心の128に対して反転する、ということです。

⬆︎で、１ばん左が元のソース、１ばん右が完全に逆転したものです。
RGB値の表示をみてください。逆転前/後ではそれぞれが128に対して反転しています。

.element {
    filter:invert(「「２0〜1」」);
}

値は0〜1で指定し、0では元の状態のまま。1にすると完全に反転します。
単位は0〜1のほかに、0%〜100%で指定することもできます。

.sample {
    filter:invert(80%);
}

さわやかな晴れ模様が一転して、何か恐ろしい出来事の前触れのようになりました💧

RGB反転の中心は「128」でしたね。
なので「0.5」を指定すると..

.sample {
    filter:invert(0.5);
}

要素に含まれるすべての色がRGB(128,128,128)となり、全体がグレーになってしまいます。

sepia〜レトロ写真風。

sepia関数は、モノクロ写真の経年劣化をシミュレーション。レトロな雰囲気を醸し出すことができます。

.element {
    filter:sepia(「「２0〜1」」);
}

赤などの暗めの色はどんどん茶色掛かっていき、黄色など明るめの色は白に近づいていきます。

値は0〜1で指定し、0では元の状態のまま。1にすると完全なセピア調になります。
単位は0〜1のほかに、0%〜100%で指定することもできます。

.sample {
    filter:sepia(0.9);
}

年月が経ち劣化した、昔の白黒写真のようになりました。

grayscale〜モノクロ化。

gray-scale関数は、要素をモノクロ化させる効果があります。

.element {
    filter:grayscale(「「２0〜1」」);
}

値は0〜1もしくは0%〜100%で指定します。0のときがデフォルト状態で、1になると完全なモノクロとなります。

.sample {
    filter:grayscale(0.5);
}

grayscaleを「0.5」としました。元画像にくらべ、色味が少なくなっています。

モノクロ色は、RGB値が等しくなっている状態です。grayscale関数はRGB値を徐々に同じ値に寄せていく、という仕事をしているのです。

hue-rotate〜色相回転。

hue-rotate関数は、色相を回転させた結果を返します。
「色相の回転？」

色相(hue)とは「赤」や「青」など、濃淡や明るさを抜きにした「色合い」のみを成分として取り上げたものです。
色相はしばしば色相環という円形に並べられたもので表現され、0°〜360°の角度で特定される方式が取られます。「赤なら0°、紫なら270°」といった具合です。

hue-rotateは現在位置している色相環上の位置から、角度指定によって回転させたものを結果として返します。

.element {
    filter:hue-rotate(「「２〇〇deg|〇〇turn|〇〇rad」」;)
}

角度表記についてですが、慣れ親しんでいる度数法（30度回転、とかの「度」)で記述するほか、radian（弧度法）やturn（１turn = 360°）などの単位も使用できます。
色相環の法則にのっとり、１回転で元の色に戻ります。

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

回転角度を180°とし、反転させてみました。
全く違った印象になりましたね。また先に紹介したinvert関数による「RGBの反転」とも違った結果になります。

brightness〜明るさ調整。

brightness関数は、色の明るさを調整します。
CSSの色指定ではRGB色空間を使ったものがおなじみですが、ここではHSL色空間で考えてみましょう。

HSL色空間は、hue(色彩)/saturate(彩度)/luminance(輝度)の３要素を使って色を特定する方法です。

H - hue(色彩)については、hue-rotateのところで紹介しましたね。
S - saturate(彩度)は、色の鮮やかさのパラメータです。
L - luminance(輝度)は、見た目の明るさを表す指標で、0%〜100%の範囲で表されます。他２つのパラメータの値にかかわらず、「0%」で完全な黒、「100%」で完全な白となります。

brightness関数は、HSLのluminance(輝度)を操作して明るさを変化させます。

HSL変換を使った配色や色指定。

〽️ 配色パターンを秒作。

HSL色空間については⬆︎の記事で詳しく紹介しています。
極めたい方は参考にしてください。

.element {
    filter:brightness(「「２n|n%」」);
}

値は単位なしの数値または%指定で記述します。
1(または100%)の状態が元の色、0(または0%)になると輝度が0〜完全な黒となります。

値を大きくしていくと、明るい色(そもそも輝度が高かった色)は早々に輝度maxに到達し、完全な白となります。

.sample {
    filter:brightness(1.2);
}

brightnessを1.2にしてみました。
かなり明るくなりましたね。

.sample {
    filter:brightness(1.5);
}

1.5くらいにすると、明るさとともに色味も変わってきています。
画像要素を補正するときは、値をほんのちょっとだけ大小させるのが良いのかもしれません。

saturate〜色の鮮やかさ。

saturate関数は、色の鮮やかさを変化させます。
先ほど紹介したHSL色空間で言えば、saturate(彩度)を変化させる働きをします。

「鮮やかさ」というとピンとこないかもしれません。
⬆︎は、彩度100%と28%の比較。100%のほうが明らかに「濃い」ですよね。
28%のほうは「薄い」。さらに彩度を下げていくと、最後には完全なモノクロ色になってしまいます。

「色の鮮やかさ ≒ 色の濃さ」という解釈で問題ありません。

.element {
    filter:saturate(「「２n|n%」」);
}

値は単位なしの数値または%指定で記述します。
1(または100%)の状態が元の色、0(または0%)になると彩度が0〜完全なモノクロとなります。
値はどんどん大きくしていくことができますが、彩度maxになった時点でそれ以上は変化しなくなります。

.sample {
    filter:saturate(5);
}

saturateを「5」と大きく掛けてみました。全体がかなり色濃くなっています。

contrast〜明暗の差。

contrast関数は、明暗差を調節します。

.element {
    filter:contrast(「「２n|n%」」);
}

暗めの色(上)と明るめの色(下)の変化を比較したもの⬆︎。
「1」が元の状態です。値を下げていくと、２つの色の明暗差は小さくなっていき、最終的には同じグレーになります。

面白いのが、値を「1」よりも大きくしていったとき。
上の暗い色はより暗くなっていき、黒に近くなっていきます。下の明るい色はいっそう明るくなっていき、白に近づいていきます。

.sample {
    filter:contrast(2);
}

contrast「2」にしてみました。
brightnessやsaturateに比べ、色味の変化を抑えつつ、くっきりさせることができています。

いっぱいありましたね。

最後までお読みくださり、ありがとうございました。

今回はCSSのfilterについて紹介してきました。10種類とたくさんあって、全部は覚えきれないですよね。
もちろん、すべてを覚える必要はありません。web制作中に「あれってどうやるんだっけ？」なときに再度、このページを訪れてみてください。すぐに答えにたどり着けます。

ではまた〜 🎵