cssで画像にインスタグラム風のフィルターを簡単に追加 instagram.css

投稿日:2018年2月9日/更新日:2018年3月2日

instagram.css を使うと?

instagram.css とclassを付与するだけで画像にフィルター効果が得られます。
※ブラウザにより表示が異なる場合があります。まずはサンプルを（元画像は全て同じで左上はフィルター名です。）

1977

Aden

Amaro

instagram.css 使用方法

github の instagram.cs sページの「instagram.css」か「instagram.min.css」のいずれかを使用します。
https://github.com/picturepan2/instagram.css/tree/master/dist

ダウンロードしにくい場合はRawを保存
instagram.css
instagram.min.css

次にダウンロードしたcssをWEBサイトにUPして <head>～</head> 内で読み込みます。

記載例

<link rel="stylesheet" href="/〇〇〇/css/instagram.min.css">

フィルターを使用する画像をUPします。既にUPしている画像を使用する時は不要です。

Instagram.css のページでフィルターを決定してimgタグをclassで囲みます。

その際に注意が必要です。
「Aden」を選んだ場合はclass名は「filter-aden」となります。

記載例

<div class="filter-aden">
  <img src="/〇〇〇/img/test.jpg">
</div>

記載が済みましたら、表示を確認します。

instagram.css サンプル

意外と簡単にできて楽しいので他にサンプルを作成しました。

Ashby

Brannan

Brooklyn

Charmes

Clarendon

Crema

Dogpatch

Earlybird

Gingham

Ginza

Hefe

Helena

Hudson

Inkwell

Kelvin

Juno

Lark

Lo-Fi

Ludwig

Maven

Mayfair

Moon

Nashville

Perpetua

Poprocket

Reyes

Rise

Sierra

Skyline

Slumber

Stinson

Sutro

Toaster

Valencia

Vesper

Walden

Willow

X-Pro II

instagram.css フィルター名とclass名

フィルター名	class名
1977	filter-1977
Aden	filter-aden
Amaro	filter-amaro
Ashby	filter-ashby
Brannan	filter-brannan
Brooklyn	filter-brooklyn
Charmes	filter-charmes
Clarendon	filter-clarendon
Crema	filter-crema
Dogpatch	filter-dogpatch
Earlybird	filter-earlybird
Gingham	filter-gingham
Ginza	filter-ginza
Hefe	filter-hefe
Helena	filter-helena
Hudson	filter-hudson
Inkwell	filter-inkwell
Kelvin	filter-kelvin
Juno	filter-juno
Lark	filter-lark
Lo-Fi	filter-lofi
Ludwig	filter-ludwig
Maven	filter-maven
Mayfair	filter-mayfair
Moon	filter-moon
Nashville	filter-nashville
Perpetua	filter-perpetua
Poprocket	filter-poprocket
Reyes	filter-reyes
Rise	filter-rise
Sierra	filter-sierra
Skyline	filter-skyline
Slumber	filter-slumber
Stinson	filter-stinson
Sutro	filter-sutro
Toaster	filter-toaster
Valencia	filter-valencia
Vesper	filter-vesper
Walden	filter-walden
Willow	filter-willow
X-Pro II	filter-xpro-ii