超便利！CSSだけでInstagramのようなフィルターを画像に追加する方法

概要

任意の画像に指定のクラスを付与すると、その画像がInstagramのフィルターを適用した状態になります

Instagram.cssとは？

Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the CSSgram for inspiration.

つまり、CSSを使うだけで、Instagramのようなフィルターを画像に追加できるライブラリです
CSSgram にインスピレーションを受けたらしいです。
正直に書いてあるところが素敵 笑

サンプル

オリジナル

Willow

1977

Ginza

超便利

準備

1. とりわけ、instagram.css をダウンロードする
2. 任意のWebサイトまたはWebアプリケーションに instagram.css を配置する
3. 例えば、<link rel="stylesheet" href="dist/instagram.css"> のようなタグで、instagram.css を読み込む

実装

1. DEMOページ を参考にフィルターを選ぶ

2. Ginzaを選択した場合は下記のようなコードで適用されます。

index.html

<figure class="filter-ginza">
  <img src="assets/img/instagram.jpg">
</figure>

要は <figure> タグのclass名を filter-[filter-name] にするだけ！

[filter-name] は小文字です！

フィルターネームとクラス名の一覧

• 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
• Kuno 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