صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
pixelfed
/
instagram.css
mirrorاز https://github.com/pixelfed/instagram.css
دنبال کردن 2
ستاره دار 0
انشعاب 0
پرونده‌ها مشکلات 0 ویکی

Complete set of Instagram filters in pure CSS

شاخه: master
شاخه‌ها تگ‌ها
instagram.css
ZIP TAR.GZ
Yan Zhu 19a73ee928 Update example photo name. 7 سال پیش
assets 19a73ee928 Update example photo name. 7 سال پیش
dist 3484020dc4 Improve Poprocket filter 7 سال پیش
src 3484020dc4 Improve Poprocket filter 7 سال پیش
.csscomb.json f226c2b34e Initial Instagram filter 1977 7 سال پیش
.gitattributes f226c2b34e Initial Instagram filter 1977 7 سال پیش
.gitignore f226c2b34e Initial Instagram filter 1977 7 سال پیش
LICENSE 5b2cef865a Initial commit 7 سال پیش
README.md 19a73ee928 Update example photo name. 7 سال پیش
gulpfile.js 876d4073ad Update gulp watch script 7 سال پیش
index.html 19a73ee928 Update example photo name. 7 سال پیش
package.json 3484020dc4 Improve Poprocket filter 7 سال پیش

README.md

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.

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

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