Download the compiled and minified Instagram.css files. Include instagram.css located in /dist in your website or Web app <head> part.
<link rel="stylesheet" href="instagram.min.css">
All filters use the same HTML structure with different filter-[filter-name]
classes.
<figure class="filter-[filter-name]">
<img src="images/galg.jpg">
</figure>
For example if you want to add 1977 filter on your image than your code should goes like this
<figure class="filter-1977">
<img src="images/galg.jpg">
</figure>
More filter effects and their names as below:
Normal
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
Share your thoughts in comments, we accept voice comments as well for lazy coders 😉
Facebook Comments