DEV Community

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

Visualizing the power of CSS Filters using Picturesque.css

Tulsi Prasad
19, Sophomore. Crafting meaningful user experiences. Works with React, Redux and JS. Learning through building useful tools and apps for people. Helping people on the internet, to build a better web.
・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.

Discussion (4)

Collapse
sanderdebr profile image
sanderdebr

Awesome!

Collapse
ziizium profile image
Habdul Hazeez

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

Collapse
chriscthomas profile image
Chris Thomas

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!

Collapse
heytulsiprasad profile image
Tulsi Prasad Author

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 😊

Forem Open with the Forem app