【CSS】filterプロパティで画像をいろいろ加工

ウェブ制作技術

この記事はこんな人に向けて書いています

  • Webデザイナー
  • コーダー/マークアップエンジニア

おはようございます、ヒグチです。
前回は、こんな記事を書かせていただきました。

【CSS】画像を白黒、セピアに
この記事はこんな人に向けて書いています Webデザイナー コーダー/マークアップエンジニア おはようございます、ヒグチです。 今回のネタは、CSSの小技です。 画像を、CSSだけで白黒にしたり、セピア色にし

CSSで、画像を白黒にしたりセピアにしたりする方法を紹介しました。

これは、CSSの「filter」プロパティを使います。
調べてみると、このfilterプロパティ、実にいろいろな表現ができるようです。

CSSフィルタなんて呼ばれて、Photoshopみたいいろいろできます。

今回はこのfilterプロパティを掘り下げてみたいと思います。

それでは行ってみましょう!

cssフィルタ

いろいろなCSSフィルタ

前回紹介した、白黒やセピアのエフェクト以外にも、いろいろなCSSフィルタがあります。

明度・彩度

まずは明度と彩度です。

See the Pen CSSフィルタ(明度・彩度) by daisukehiguchi (@daisukehiguchi) on CodePen.

実際のコードは上記のCSSを見ていただければと思います。

明度は「brightness()」の()内の値を0〜1.0までで調整します。
デフォルトは1.0。

彩度は「saturate()」の()内に、0%〜上限無制限で値を入れます。
デフォルトは100%。

ぼかし・コントラスト

次にぼかしとコントラスト。

See the Pen CSSフィルタ(ぼかし・コントラスト) by daisukehiguchi (@daisukehiguchi) on CodePen.

blur()」の()内の値をデフォルト0pxから上限無制限で設定できます。

コントラストは「contrast()」の()内に、0%〜上限無制限。
デフォルトは100%です。

色相の変換・階調の反転

特殊なのに、色相の変換と階調の反転があります。

See the Pen CSSフィルタ(色相の変換・階調の反転) by daisukehiguchi (@daisukehiguchi) on CodePen.

「色相」または「色相環」とは、あらゆる色を円にして並べたものです。

色相環

色相環

で、CSSフィルタでこれを変換することができます。
「hue-rotate()」に0deg〜360degまでの角度を指定してあげます。

画像に使われている色を、反対の色にすることもできます(階調の反転)。
「invert()」に0%〜100%を指定します。
デフォルトは0%、100%で真逆の色になります。

これはいろいろ遊べそうですね。

その他

上記以外にも、drop-shadowやopacityなども使えます。
box-shadowプロパティやopacityプロパティに似た表現になります。

それから、複数のフィルタをまとめて指定することもできます。


たのしいCSSフィルタの世界、いかがでしたでしょうか?

いまはインスタグラムにアップする写真も手軽に加工できちゃいますが、
Web制作でも簡単なコードでできちゃいますね。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。