Photographic filters made with CSS, inspired by VSCO and CSSgram
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.csslintrc
.editorconfig
.gitignore
Gruntfile.js
LICENSE
README.md
cssco.css
cssco.min.css
package.json

README.md

CSSCO

Built with Grunt

Photographic filters made with CSS, inspired by VSCO and CSSgram http://www.cssco.co

Download


How to use CSSCO

Add the downloaded CSS file path to the <head> of your document:

<link rel="stylesheet" href="path/to/cssco.css">

Add the filter to your image element using the relevant CSSCO classes:

<div class="cssco cssco--c1">
   <img src="image.png">
</div>

Compatibility

Unfortunately, IE & Edge browsers, as well as Opera Mini do not support filters and blend modes.

Safari (desktop & iOS) does not support the hue, saturation, color, and luminosity blend modes, but this should not affect the CSSCO filters much, if at all.

See compatibility for: mixblendmode | filters


*These filters are inspired by VSCO and are not exact replicas of their filters, but are as close as I could get. If you think you can get closer, please feel free to contribute :)


Contributing

Requirements

Ensure that the following is installed on your computer:

  1. Git
  2. Node.js

Getting started

  1. Clone the repository: git clone git@github.com:we-are-next/cssco.git
  2. Change to the directory you cloned the repository into: e.g. cd cssco

Lint/Minify

  1. Install the required dependencies: npm install
  2. Lint: grunt lint
  3. Minify: grunt min