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

  1. Tech
  2. 0 view

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を使ったライブラリがあります。

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

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

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

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

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

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

記事一覧

関連記事

Raspberry Pi 3でBluetooth LEを導入…

Raspberry Pi 3から、Bluetoothモジュールが標準装備されたモデルが発売されています。今回はその機能を使い、BLEをプログラムで制御する手始めをご説…

  • 0 view

Macを使ったRaspberry Pi 3 model Bの…

この記事は、実際にRaspberry Piを購入し、Raspberry PiにOSをインストールするところまでを習得することをゴールにしております。この記事の続きは順…

  • 0 view

Raspberry Pi 3とタクトスイッチでLEDを制御す…

今回は、ラズパイを用いて、いわゆるLチカというやつをやってみたいと思います。とはいっても、ただLEDを光らせるだけでは面白くないので、ソフトウェアエンジニアリング…

  • 0 view

Android BLEで指定したService UUIDのデ…

Androidと特定のペリフェラルとBluetooth LEで接続しようとするとき、Service UUIDを指定して、そのUUIDを持ったデバイスを探すのが常套手段かと…

  • 0 view
%d人のブロガーが「いいね」をつけました。