DEV Community

Cover image for CSS Art: Slice of pizza as favorite snack
Natália F. Dev
Natália F. Dev

Posted on

7 3 2 3 5

CSS Art: Slice of pizza as favorite snack

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

Inspiration

Pizza has been one of my favorite snacks since childhood, and it was one of the first things I thought of when I read the challenge title.

Demo

Journey

Drawing with code is one of my hobbies, but it had been a while since I played around with CSS. Discovering about the challenge made me eager to start practicing again. The initial attempts at the drawing were not great, but with a little patience and persistence, the appearance improved somewhat. It's not one of my prettiest projects, but I'm happy with the result.

In the code, the most challenging part was rendering the melted cheese (not supported in all browsers), but thanks to a post on the CSS Tricks website, I was able to solve the problem!

The rest of the elements are a combination of shadows and border manipulations, nothing too different from what most people do when practicing art with CSS.

I hope to improve the code in the future and add some animations or more details!

Top comments (4)

Collapse
 
morgannadev profile image
Morganna

That is really cool! Awesome!

Collapse
 
nataliafdev profile image
Natália F. Dev

Thanks, Morganna! 💕

Collapse
 
grandpa44997 profile image
Daniel Freitas

Amazing work!

Collapse
 
robertheory profile image
Roberto Costa

Very cool!!!
Drawing just with CSS is amazing!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay