Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/picturepan2/instagram.css

Instagram.css - Complete set of Instagram filters in pure CSS
https://github.com/picturepan2/instagram.css

Last synced: about 1 month ago
JSON representation

Instagram.css - Complete set of Instagram filters in pure CSS

Lists

README 

        
# 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.



``



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.



```



  



```



## 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. ♥