instagram.css
Version:
84 lines (66 loc) • 2.58 kB
Markdown
# 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](https://github.com/una/CSSgram) for inspiration.
## What's next
- Add more Instagram filters
## Getting started
Download the compiled and minified [Instagram.css files](https://github.com/picturepan2/instagram.css). 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](https://picturepan2.github.io/instagram.css/) 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>
```
## Available filters
- 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`
## Custom
You can custom Instagram.css by modifing SASS `.scss` files located in `src` folder.
## Browser support
Instagram.css uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:
- Chrome (18+)
- Microsoft Edge (13+)
- Firefox (35+)
- Safari (6+)
- Opera (15+)
Built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). 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](https://www.paypal.me/picturepan2) for the further development. ♥