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

サイト内検索

最近の投稿

アイキャッチ
ワードプレスでのカテゴリごとのページング方法

ワードプレスの投稿ページはカテゴリー関係なくページングされてしまいます。投稿順で表示されるのですが、これを同一カテゴリー内だけでページング、ページ送りをする方法をご紹介します。 お知らせ、ブロ...

09 Dec 2017

アイキャッチ
小学一年生のためのひらがなカタカナ神経衰弱

私の娘は遊ぶことが大好きです。でいつも何して遊ぶが口癖になっているほど遊びが大好き、当然勉強は嫌い。。。それでゲーム感覚で勉強が出来る方法がないかと思案したわけですが、カードゲームが好きなのでカ...

02 Dec 2017

アイキャッチ
グーグルマップのdirections APIを使ってバス貸切料金算出方法

グーグルマップのdirections apiは距離と時間を調べるときに役立ちます。複数の経由地も入れることが可能で[コチラ](https://developers.google.com/maps...

25 Nov 2017

アイキャッチ
日本語のwebフォントを作成する方法

Webフォントを使うといえば[Google Fonts](https://fonts.google.com/)を使って利用している人が多いかもしれません。 そのほか、アドビ社の[Typekit]...

18 Nov 2017

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

著者

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

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

フッターイメージ