使い方はGitHubからダウンロードするなどしてCSSを（instagram.css or instagram.min.css）を読み込み、あとは下記サンプルコードのように適用したいimgを括っている要素に特定のclassを記述することで、元イメージはそのままで簡単にインスタグラム風のフィルターを適用できます。
GitHubで記載されているサンプルコードではfigure要素に対してclassを付与していますが、下記のようにdivなど別の要素でも可能です。
HTML
<div class="filter-[filter-name]">
<img src="image.jpg">
</div>
classは.filter-[filter-name]という形で付与し、例えば「Amaro」風なら.filter-amaro、「Gingham」風なら.filter-ginghamというように、「filter-」の後に各フィルター名を指定します。
それぞれのclass名は下記のようになっており、現時点で41種類用意されています。
- 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
ちなみに、このCSSはフィルターの見栄えを再現するために::before疑似要素を使用しているので、付与する要素で既に::before疑似要素を使用して何かしらのスタイルを指定していると上手く適用されないことがあるので注意が必要です。
また、filterやmix-blend-modeを利用しているため、特にIEでは基本的に利用できません。
同じようにインスタグラム風フィルターをCSSで再現できるものとして「CSSgram」や「cssFilters」などありますが、それらより多くのフィルターが再現されていますし、scssも用意されていてカスタマイズなどもしやすいと思うので、今後このような見栄えを実装したい機会があればこちらを利用するのが良さそうです。
各フィルター適用時の表示確認デモや詳細については、それぞれ以下より確認できます。