Go to file
2017-11-21 21:05:55 +08:00
assets Initial Instagram filter 1977 2017-11-20 19:38:36 +08:00
dist Add filters Aden, Crema and Ludwig 2017-11-21 21:05:55 +08:00
src Add filters Aden, Crema and Ludwig 2017-11-21 21:05:55 +08:00
.csscomb.json Initial Instagram filter 1977 2017-11-20 19:38:36 +08:00
.gitattributes Initial Instagram filter 1977 2017-11-20 19:38:36 +08:00
.gitignore Initial Instagram filter 1977 2017-11-20 19:38:36 +08:00
gulpfile.js Initial Instagram filter 1977 2017-11-20 19:38:36 +08:00
index.html Add filters Aden, Crema and Ludwig 2017-11-21 21:05:55 +08:00
LICENSE Initial commit 2017-11-20 00:59:47 -06:00
package.json Add new filters 2017-11-21 14:28:57 +08:00
README.md Add Readme and new browser support 2017-11-21 12:44:21 +08:00

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 for inspiration.

What's next

  • Add more Instagram filters

Getting started

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.

Custom

You can custom Instagram.css by modifing SASS .scss files located in src folder.

Browser support

Devices.css uses 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. Feel free to submit a pull request. Help is always appreciated.

Devices.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development. ♥