Visualizing the power of CSS Filters using Picturesque CSS

2 min read

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.

https://i.imgur.com/0HnPmvf.png

💁‍♂️ What it's built using?

Well, it's pretty much a begginer's stack, as I wanted to use what I learnt 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!

https://i.imgur.com/vCA1c5p.png

🤘 How can I access it?

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

Picturesque.css

⭐ Is it Open Source?

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

heytulsiprasad/picturesque.css

🎉 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 begginner-friendly. (I'm too 😆) Go ahead, create an issue and start working or let me know on Twitter.