Ana Sayfa Keşfet Yardım
Giriş Yap
pixelfed
/
instagram.css
şunun yansıması https://github.com/pixelfed/instagram.css
İzle 2
Yıldızla 0
Çatalla 0
Dosyalar Sorunlar 0 Wiki

Complete set of Instagram filters in pure CSS

Dal: master
Dallar Biçim İmleri
instagram.css
ZIP TAR.GZ
Yan Zhu 19a73ee928 Update example photo name. 7 yıl önce
assets 19a73ee928 Update example photo name. 7 yıl önce
dist 3484020dc4 Improve Poprocket filter 7 yıl önce
src 3484020dc4 Improve Poprocket filter 7 yıl önce
.csscomb.json f226c2b34e Initial Instagram filter 1977 7 yıl önce
.gitattributes f226c2b34e Initial Instagram filter 1977 7 yıl önce
.gitignore f226c2b34e Initial Instagram filter 1977 7 yıl önce
LICENSE 5b2cef865a Initial commit 7 yıl önce
README.md 19a73ee928 Update example photo name. 7 yıl önce
gulpfile.js 876d4073ad Update gulp watch script 7 yıl önce
index.html 19a73ee928 Update example photo name. 7 yıl önce
package.json 3484020dc4 Improve Poprocket filter 7 yıl önce

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