CSSだけでInstagram風のフィルターが使えるcssgramが便利

CSSだけでInstagram風のフィルターが使えるcssgramが便利

  • 2016-06-25  最終更新日:2016-06-25

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE(インターネットエクスプローラー)は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet


スポンサーリンク


設定方法

CSSgram

設定方法は簡単です。まず公式サイトからcssをダウンロードします。そしてcssを記述します。

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

そして指定のタグくくれば完成です。

<!-- HTML -->
<figure class="aden">
	<img src="../img.png">
</figure>

簡単ですね。試しに使ってみます。

使用例

  • CSSgram ↑元の画像
  • CSSgram
    ↑1977
  • CSSgram
    ↑aden
  • CSSgram
    ↑brooklyn
  • CSSgram
    ↑clarendon
  • CSSgram
    ↑earlybird
  • CSSgram
    ↑gingham
  • CSSgram
    ↑hudson
  • CSSgram
    ↑inkwell
  • CSSgram
    ↑lark
  • CSSgram
    ↑lofi
  • CSSgram
    ↑mayfair
  • CSSgram
    ↑moon
  • CSSgram
    ↑nashville
  • CSSgram
    ↑perpetua
  • CSSgram
    ↑reyes
  • CSSgram
    ↑rise
  • CSSgram
    ↑slumber
  • CSSgram
    ↑toaster
  • CSSgram
    ↑walden
  • CSSgram
    ↑willow
  • CSSgram
    ↑xpro2

利用できるクラスタグ

  • 1977: class=”_1977”
  • Aden: class=”aden”
  • Brooklyn: class=”brooklyn”
  • Clarendon: class=”clarendon”
  • Earlybird: class=”earlybird”
  • Gingham: class=”gingham”
  • Hudson: class=”hudson”
  • Inkwell: class=”inkwell”
  • Lark: class=”lark”
  • Lo-Fi: class=”lofi”
  • Mayfair: class=”mayfair”
  • Moon: class=”moon”
  • Nashville: class=”nashville”
  • Perpetua: class=”perpetua”
  • Reyes: class=”reyes”
  • Rise: class=”rise”
  • Slumber: class=”slumber”
  • Toaster: class=”toaster”
  • Walden: class=”walden”
  • Willow: class=”willow”
  • X-pro II: class=”xpro2”

簡単に使えるのでフィルター機能として使ってみてはいかがでしょうか?


∞Tadashi Suyama∞

css web Instagram filter インスタグラム風
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
bootstrap4でのtable-responsiveをレスポンシブにする

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。 さて...

16 Jun 2018

アイキャッチ
CSSでの画像ホバー効果ライブラリのご紹介

今回は純粋なCSS画像ホバー効果ライブラリをご紹介します。画像をマウスオーバーするとテキストが表示されるCSSライブラリになります。実装も簡単でクラス指定をすることで40種類以上の効果を体験でき...

10 Jun 2018

アイキャッチ
ワードプレスで特定のページにnoindex,nofollow

ワードプレスに特定のページにmeta name="robots" content="noindex,nofollow"をつける場合はプラグインを利用するかヘッダーに条件分岐でいれるかだと思います...

03 Jun 2018

アイキャッチ
Vagrantのアンインストール方法-Mac版

さて今回は簡単にご紹介、そもそもそんなにvagrantをアンインストールしないのですがそういう機会があったので覚書で記載しておきます。 Mac版のvagrantってアンインストールってなぜか手...

26 May 2018

アイキャッチ
超絶・超速のnode-sassでsassコンパイルのすすめ

さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他...

12 May 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ