CSSで10のfilterプロパティの使い方と画像エフェクトの確認

管理者

7年前

Photoshopなどの画像編集ソフトを使わずに、CSSだけで画像に明るさやコントラストの調整、モノクロやぼかしなどの効果（エフェクト）を与えることができる無料のオンラインツールを作成しました！
写真を選択してスライドバーを動かすだけで、CSSのfilterプロパティが画像にどのような効果を与えるか確認できます。

CSSのfilterの動作を確認

まず、CSSのfilterプロパティを使って、画像にどのような効果（エフェクト）が付けられるかわからない方は、こちらのツールで実際に試してみてください。

filterプロパティを確認する

CSS filter対応ブラウザ

[CSS filter Effects]に対応しているブラウザの一覧は以下になります。
いつものアレを除いてはほとんど対応しているので、まず問題ないでしょう。

Can I Use css-filters?

CSS filterの書き方

以下のようにfilterのプロパティをスペース区切りで書きます。

img {
     filter: grayscale(0%) sepia(0%) saturate(100%) hue-rotate(0deg) invert(0%) opacity(100%) brightness(100%) contrast(100%) blur(0px) drop-shadow(rgb(0, 0, 0) 0px 0px 0px);
}

とりあえず、全部詰め込んで見ましたが、どれがどの効果（エフェクト）かわからないですよね？
CSS3 filterプロパティの名称と効果については、次の一覧をご覧ください。

CSS3 filterプロパティ一覧

[CSS3 filter Property]の効果（エフェクト）の一覧と、それそでのデモはこちらから。
英語サイトですが、翻訳したらより詳しく知ることができます。

全ブラウザに対応するには

[filter]の前にお決まりのベンダープレフィックスを付ければよろしいかと。
ただブラウザも進化してるので、最近は付けなくてもいいみたいですが…

img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     filter: grayscale(100%);
}

【おまけ】CSSGram

CSSGram

本記事に関連して、Classを指定するだけで、簡単にInstagram風に画像を加工できるCSSライブラリをご紹介して終わります。

Original:https://minory.org/css-filter.html
Source:Minory
Author:管理者