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😊!!
Top comments (0)