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

css_filter
  • URLをコピーしました!

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

目次

CSSのfilterの動作を確認

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

CSS Filter Effects
CSS Filter Effects

CSS filter対応ブラウザ

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

CSS filterの書き方

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

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

CSS3 filterプロパティ一覧

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

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

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

【おまけ1】CSSGram(CSSライブラリ)

CSSGram
CSSGram

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

【おまけ2】実際に画像を加工する場合は?

実際に画像そのものを加工するなら、定番のAdobe Photoshopか、無料のオンラインの画像編集ツール「Pixlr Editor」がおすすめです!

著:おのれいこ, 著:栗谷 幸助, 著:相原 典佳, 著:塩谷 正樹, 著:中川 隼人
¥2,750 (2024/04/06 19:34時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次