loading...
Cover image for Visualizing the power of CSS Filters using Picturesque.css

Visualizing the power of CSS Filters using Picturesque.css

heytulsiprasad profile image Tulsi Prasad ・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 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!

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.

⭐ 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!

GitHub logo 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.

Working Demo

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

Pull Requests Welcome first-timers-only Friendly MIT license

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 ⭐…

πŸŽ‰ 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.

Posted on Jun 8 by:

heytulsiprasad profile

Tulsi Prasad

@heytulsiprasad

A teen trying to figure out why it is the way it is. Freshmen. Friendly neighborhood #Javascript developer. Like making things and writing how I make 'em. ⚑

Discussion

markdown guide
 

This is really convenient and a neat project. I think what's great is that as you continue to grow and learn new technologies, you can refactor the application to use them, and keep it going! Awesome!

 

Really inspired man, thank you. And yes, I was thinking the same. Moreover I'm learning react now, so also could create some more features using it, you know, like drop-shadow, bg-blend modes etc...so excited 😊

 

This is very interesting or in Spanish: esta muy interesante!