CSSで画像の加工ができるCSSFilterを使ってみた

CSS3のFilterプロパティを使うことによって、画像を始めとした様々な要素にフィルターをかけることができます。

今回は、CSS Filterの機能や使い方について解説していきます。

サンプル

サンプル画像は上から順番に、フィルター無し、グレースケール50%、グレースケール100%の状態です。

各フィルターごとにパラメータを調整することができます。

See the Pen JKbVqm by Yuta Kiyama (@yutakiyama) on CodePen.0

対応ブラウザ

IEでは使えませんが、ほとんどのモダンブラウザでベンダープレフィックスを付与することによって使用可能となっています。(Can I Use参照)

-webkit-のみベンダープレフィックスを付与すると、多くのブラウザで対応できます。

設定可能なフィルター

設定ができる各フィルターとそのサンプルコードです。

See the Pen CSS Filter by Yuta Kiyama (@yutakiyama) on CodePen.0

これらのフィルターを組み合わせることも可能です。

 

インスタグラム風な画像加工ができるCSSライブラリ「CSSGram」

CSSGramというCSSFilterを使ったライブラリがあります。

このライブラリは、インスタグラムのアプリみたいに手間をかけずに画像の加工ができます。

スクリーンショット 2016-06-23 23.48.37

便利なライブラリなので、手軽に画像加工したい時などにいかがですか。

The following two tabs change content below.

Yuta Kiyama

インフラやフロントエンドなど色々と担当しています。React勉強中です。 いいサービスを生み出していけるエンジニアになるため日々精進中。 好きなエディタはRubyMineやWebStorm。