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

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

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

サンプル

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

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

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

対応ブラウザ

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

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

-webkit-filter: grayscale(50%);
filter: grayscale(50%);

設定可能なフィルター

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

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

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

-webkit-filter: grayscale(50%) invert(50%);
filter: grayscale(50%) invert(50%);

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

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

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

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

この記事を書いた人
最新の記事

Yoshio Yanagi

代表取締役：株式会社クリエイターズ・ラボ

株式会社クリエイターズ・ラボ代表取締役。株式会社078 取締役。中学生の時に父の自作PCを譲り受け、はじめてのウェブ制作を経験する。見よう見まねで自分のウェブサイトにチャット機能や掲示板を自作で実装したのがはじめてのプログラミング経験。大学在学中にLinuxとC言語を学ぶ。大学卒業後はエンジニアとして自動車メーカーで油圧制御プログラムの開発や、シミュレーションソフト開発に従事。その後、半導体商社にて組込みソフトエンジニアとして、産業機器や家電、IoT等の組込みソフトウェア開発に従事。 2015年9月に株式会社クリエイターズ・ラボを設立。