DEV Community

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

Posted on

It’s burger o’clock - Pure CSS Art🍔

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)Pseudo element: 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

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

Thank you😊!!

Top comments (3)

Collapse
 
ben profile image
Ben Halpern • Edited

Looks tasty

Collapse
 
thomasbnt profile image
Thomas Bnt

🍔🥺

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Its mouth watering, Gargee