https://github.com/laurenwaller/cssco

Photographic filters made with CSS, inspired by VSCO and CSSgram
https://github.com/laurenwaller/cssco

blend-modes css filter photographic-filters vsco

Last synced: about 1 month ago
JSON representation

Photographic filters made with CSS, inspired by VSCO and CSSgram

• Host: GitHub
• URL: https://github.com/laurenwaller/cssco
• Owner: laurenwaller
• License: mit
• Created: 2016-02-18T06:48:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-22T11:58:16.000Z (over 7 years ago)
• Last Synced: 2024-05-08T09:40:14.809Z (4 months ago)
• Topics: blend-modes, css, filter, photographic-filters, vsco
• Language: CSS
• Homepage: http://www.cssco.co
• Size: 4.55 MB
• Stars: 767
• Watchers: 30
• Forks: 33
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - cssco:

README

        
# CSSCO

[![Built with Grunt](https://cdn.gruntjs.com/builtwith.svg)](http://gruntjs.com/)

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

**[Download](https://raw.githubusercontent.com/we-are-next/cssco/master/cssco.css)**

___

### How to use CSSCO

**Add the downloaded CSS file path to the `` of your document:**

``` html

```

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

``` html



   



```


___

### 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](http://caniuse.com/#feat=css-mixblendmode) | [filters](http://caniuse.com/#feat=css-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](http://git-scm.com/downloads)

2. [Node.js](https://nodejs.org/en/download)

#### 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`