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でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前[Franz](https://its-office.jp/blog/app/201...

22 Jan 2019

アイキャッチ
島根県安来市の清水寺の展望台は絶景スポット

先日清水寺にお参りに行って参りましたが春にはとても良いスポットがありましたのでご紹介します。山の上になるのですが見渡せる場所はどちらかといえば弓ヶ浜半島、米子市の方面を一望できます。王子製紙の場...

21 Jan 2019

著者

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

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

フッターイメージ