cssco icon indicating copy to clipboard operation
cssco copied to clipboard

Photographic filters made with CSS, inspired by VSCO and CSSgram

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 [email protected]: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