Skip to content

Photographic filters made with CSS, inspired by VSCO and CSSgram

License

Notifications You must be signed in to change notification settings

laurenwaller/cssco

Repository files navigation

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