DEV Community

Cover image for It’s burger o’clock - Pure CSS Art (Version 1.2)🍔
Gargee Banerjee
Gargee Banerjee

Posted on

2

It’s burger o’clock - Pure CSS Art (Version 1.2)🍔

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

The challenge said "Favourite Snack" and I couldn't think of anything but Burger.

Demo

Journey

It had been a while since I played with CSS. Here is the recipe
for the burger😊:

BUN:
i)Box-shadow: To give the bun the burnt bun color.
ii)Border-radius: To shape the bun.

CHEESE
i)Border-bottom, border-right, border-left: To shape the cheese
And added highlight using pseudo-element(::before)

SPINACH:
i)Border-bottom, border-right: To create the base leaf structure(A "L" shape)
ii)Border-radius: To give the spinach a round leaf structure

Animation:
i)Keyframes: To specify the position during transition

I had no idea we could do so much with pseudo-element, box-shadow and border alone. I enjoyed doing this.

Thank you😊!!

Image description

Image description

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

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