ghosh / cssfilters

🌄 Custom and Instagram like photo filter playground for CSS built with React

cssFilters.co

This is the repo for cssfilters.co - A visual tool to create custom and instagram like photo filters in css.

Credits

• Una Kravets - For the fantastic cssgram project
• Unsplash - For collecting and providing the awesome demo images
• React - For being the most awesome js framework ever

Improvements and Bugs

Please feel free to open a new issue here with your suggestions or any bugs which you may have come across.

Contributing

Incase you want to contribute to the source code, clone/download this repo and build the project locally. You would need to have node and gulp installed on your machine.

There is only one gulp task which you would need - gulp go. This handles all the compiling and setup tasks. It accepts two optional flags:-

• --open - Opens the project in your default browser after compilation
• --build - Minifies and optimizes the stylesheets and scripts

These flags can be passed together also. For example:- gulp go --build --open. This will open the browser and run the watch task in production mode.

---

A little project by @_ighosh.

\m/

cssfilters's Issues

Really nice work except for the errors

I visited your site with Firefox and the preset filters worked great but the customizer on the right failed to work. I imagine because of all the Type(e) errors. There also seemed to be an issue with javascript compiling.

add package-lock.json

npm users need the package-lock.json file

Add Save button

It would be great if there is a option to save the picture with the filter

Overlay: include a 'none' option

Radio buttons mean once an overlay is selected it can't be removed completely without a no-overlay / none option.

Safari layout bug in presets

In Safari (OS X) the presets are all bunched up.

Generated CSS Background Property Missing %

hey guys - awesome project.

I noticed an issue with the generated CSS for the background property.

example, for XPro2, the generated CSS for the background is:

background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));
background: radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));

It should be:

  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40%, rgba(43, 42, 161, 0.6));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40%, rgba(43, 42, 161, 0.6));

The % was missing after the 40, which results in invalid css

Maybe making it responsive for mobile device?

The visual layout becomes not nice looking after width 706px. Do you plan to make it target mobile devices?

gulp-scss-lint error

move to webpack

And also drop the Ruby / scss-lint peer dependency.

how to save pictures?

How can I save the result image with filters?

Current project status

Hi, what is the current status of this project? Is it still maintained?

bower is dead

We should move all dependencies to package.json.

New Feature: Toggle for effect on/off

First of all thanks for the great toll, i really enjoyed using it.
But there is one thing i would like to add. In case you want to use those css-filters for hover-effcts it is really hard to compare the before-and-after look. So an "Effect on/off"-toggle would be really helpful. What do you think?

overlapping elements

There is an overlap between the image and upload button and also you can change the position of the upload button so that it can visible to the viewers.
https://drive.google.com/file/d/1KYBQoRVkYpbcuqtglOkhE1QtvUUwMdmX/view?usp=sharing