Giter Site home page Giter Site logo

laurenwaller / cssco Goto Github PK

View Code? Open in Web Editor NEW
766.0 30.0 33.0 4.66 MB

Photographic filters made with CSS, inspired by VSCO and CSSgram

Home Page: http://www.cssco.co

License: MIT License

CSS 92.59% JavaScript 7.41%
css filter photographic-filters vsco blend-modes

cssco's Introduction

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

cssco's People

Contributors

d2s avatar michaelthorne avatar wayneashleyberry avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cssco's Issues

Clean up

When you have a moment, please can you remove all assets that aren't being used?

So master only has the HTML + CSS (and JS if you are using any) for the CSSCO project i.e. all the stuff you need if you wanted to use it in a project of your own.

Website clean up

In the gh-pages repo:

  • Delete .idea
  • Remove all assets that aren't in use

How to adjust filter strength?

Thanks for making such an awesome project.

This may be out of scope, but I was wondering how I could adjust filter strength for each filter (a la Instagram). Do you have any ideas on how this might be possible?

Thanks!

Download Ability

Is it possible to download the filtered version of the image using cssco?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.