Photographic filters made with CSS, inspired by VSCO and CSSgram http://www.cssco.co
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>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 :)
Ensure that the following is installed on your computer:
- Clone the repository:
git clone git@github.com:we-are-next/cssco.git - Change to the directory you cloned the repository into: e.g.
cd cssco
- Install the required dependencies:
npm install - Lint:
grunt lint - Minify:
grunt min