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

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

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

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

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

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

設定方法

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

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

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

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

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

使用例

• ↑元の画像

• 

  ↑1977

• 

  ↑aden

• 

  ↑brooklyn

• 

  ↑clarendon

• 

  ↑earlybird

• 

  ↑gingham

• 

  ↑hudson

• 

  ↑inkwell

• 

  ↑lark

• 

  ↑lofi

• 

  ↑mayfair

• 

  ↑moon

• 

  ↑nashville

• 

  ↑perpetua

• 

  ↑reyes

• 

  ↑rise

• 

  ↑slumber

• 

  ↑toaster

• 

  ↑walden

• 

  ↑willow

• 

  ↑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”

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

できる100の新法則 Instagramマーケティング

posted with ヨメレバ

株式会社オプト,山田智恵,小川由衣,石井リナ,できるシリーズ編集部 インプレス 2016-03-18

Amazon

楽天ブックス

∞Tadashi Suyama∞