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: 19 days ago
JSON representation
Instagram.css - Complete set of Instagram filters in pure CSS
- Host: GitHub
- URL: https://github.com/picturepan2/instagram.css
- Owner: picturepan2
- License: mit
- Created: 2017-11-20T06:59:46.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-15T20:28:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-09T19:34:08.758Z (about 1 month ago)
- Language: CSS
- Homepage: https://picturepan2.github.io/instagram.css/
- Size: 452 KB
- Stars: 4,019
- Watchers: 70
- Forks: 241
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - instagram.css - Complete set of Instagram filters in pure CSS | picturepan2 | 4003 | (CSS)
- Awesome-CSS-Resources - instagram.css: - Complete set of Instagram filters in pure CSS. (Frameworks / Resources / I)
- awesome-css-only - Instagram.css - Complete set of Instagram filters in pure CSS. (Uncategorized / Uncategorized)
- awesome-star-libs - picturepan2 / instagram.css
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. ♥