Complete set of Instagram filters in pure CSS
Yan Zhu 19a73ee928 Update example photo name. | vor 7 Jahren | |
---|---|---|
assets | vor 7 Jahren | |
dist | vor 7 Jahren | |
src | vor 7 Jahren | |
.csscomb.json | vor 7 Jahren | |
.gitattributes | vor 7 Jahren | |
.gitignore | vor 7 Jahren | |
LICENSE | vor 7 Jahren | |
README.md | vor 7 Jahren | |
gulpfile.js | vor 7 Jahren | |
index.html | vor 7 Jahren | |
package.json | vor 7 Jahren |
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.
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="dist/instagram.css">
Go to Demo page to copy the HTML source code and paste it to anywhere you want. All filters use the same HTML structure with different filter-[filter-name]
classes.
<figure class="filter-[filter-name]">
<img src="assets/img/instagram.jpg">
</figure>
filter-1977
filter-aden
filter-amaro
filter-ashby
filter-brannan
filter-brooklyn
filter-charmes
filter-clarendon
filter-crema
filter-dogpatch
filter-earlybird
filter-gingham
filter-ginza
filter-hefe
filter-helena
filter-hudson
filter-inkwell
filter-kelvin
filter-juno
filter-lark
filter-lofi
filter-ludwig
filter-maven
filter-mayfair
filter-moon
filter-nashville
filter-perpetua
filter-poprocket
filter-reyes
filter-rise
filter-sierra
filter-skyline
filter-slumber
filter-stinson
filter-sutro
filter-toaster
filter-valencia
filter-vesper
filter-walden
filter-willow
filter-xpro-ii
You can custom Instagram.css by modifing SASS .scss
files located in src
folder.
Instagram.css uses Autoprefixer to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:
Built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.
Instagram.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development. ♥