DEV Community

Cover image for Espresso Machine CSS Art
Lucas Faria
Lucas Faria

Posted on

Espresso Machine CSS Art

I've always enjoyed CSS art, seeing it as a way to draw on the web, something I've wanted to try.

Starting was the hardest part for me, especially organizing the divs and choosing the initial styles.

But now, with tools like ChatGPT and Copilot, the entry barrier is much lower. These tools help set up the basic boilerplate, and then we can iterate on it together.

They're great for the overall layout, but struggle with animations and positioning, which is when I have to do some manual work.

I'm really happy with the result.

Check out what happens when you click the coffee button! That last part was built with React, but Vanilla JS would do the trick as well.

Espresso Machine made with CSS

Here's the Code Sandbox with the implementation. I used Tailwind for styling, and React to add some quick interactivity. I could probably have made it with just Vanilla JS but I find React too comfy. 😅


I also published this on my personal website. It has a live editor that you can see it!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay