Sākums Izpētīt Palīdzība
Pierakstīties
pixelfed
/
instagram.css
spogulis no https://github.com/pixelfed/instagram.css
Vērot 2
Pievienot zvaigznīti 0
Atdalīts 0
Faili Problēmas 0 Vikivietne

Complete set of Instagram filters in pure CSS

Atzars: master
Atzari Tagi
instagram.css
ZIP TAR.GZ
Yan Zhu 19a73ee928 Update example photo name. 7 gadi atpakaļ
assets 19a73ee928 Update example photo name. 7 gadi atpakaļ
dist 3484020dc4 Improve Poprocket filter 7 gadi atpakaļ
src 3484020dc4 Improve Poprocket filter 7 gadi atpakaļ
.csscomb.json f226c2b34e Initial Instagram filter 1977 7 gadi atpakaļ
.gitattributes f226c2b34e Initial Instagram filter 1977 7 gadi atpakaļ
.gitignore f226c2b34e Initial Instagram filter 1977 7 gadi atpakaļ
LICENSE 5b2cef865a Initial commit 7 gadi atpakaļ
README.md 19a73ee928 Update example photo name. 7 gadi atpakaļ
gulpfile.js 876d4073ad Update gulp watch script 7 gadi atpakaļ
index.html 19a73ee928 Update example photo name. 7 gadi atpakaļ
package.json 3484020dc4 Improve Poprocket filter 7 gadi atpakaļ

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