Visualizing the power of CSS Filters using Picturesque.css

Hey folks! How you doing?

I was quite busy recently focusing all my efforts into making this app work! I know the name sounds terrific, but that's actually what the app is all about.

🤷‍♂️ What is Picturesque.css?

Picturesque is an online tool that provides a convenient interface to visualize your images with CSS filter effects and get the corresponding CSS styles after the filters have been applied. And that's it.

💁‍♂️ What it's built using?

Well, it's pretty much a beginner's stack, as I wanted to use what I learned, to build something from scratch. Yes, it's good old HTML, CSS (Sass) and JS (jQuery).

🙌 Who does it help?

Almost about anyone, starting to learn the powers of CSS Filters and also people who used to spend a lot of time earlier getting the right %'s of brightness or blur to their images!

🤘 How can I access it?

It's proudly hosted on amazing Vercel. You can watch the live site, Picturesque.

⭐ Is it Open Source?

Hell yeah, it's at the heart of every software. Here's a link to its source code, at GitHub. Make sure to give it a ⭐ if its something you liked!

heytulsiprasad / picturesque.css

A tool for giving your images a picture perfect look on your website, by just using CSS filters.

Making your images just, Picturesque.

You can use this whenever you want to give your image a slight tint of purple or shallow it in grayscale just for fun, and don't want to go all the way into your Photoshop and create and host another image. This is it. This is the purpose of this website.

How to setup?

Fork and Clone the repo at first.

cd picturesque.css
npm install live-server node-sass npm-run-all
npm run dev

Also, the JS code is highly documented in order for you, to get started within a flash.

Don't forget to give it a ⭐ if you liked it!

Contribute

If you are having any dope ideas to improve this (even as little as changing the font-face), don't just think twice. Go ahead and create an issue or let me know on Twitter. We can improve it together. Give it a ⭐…

View on GitHub

🎉 Contribute

If you are having any dope ideas to improve this (even as little as changing the font-face), don't think twice, the repo is very beginner-friendly. (I'm too 😅) Go ahead, create an issue, and start working or let me know at Twitter @heytulsiprasad.