DEV Community

Cover image for How I Transformed My Favorite Snack into CSS Art
Nargis Khatun
Nargis Khatun

Posted on • Edited on

2 1 1 1 1

How I Transformed My Favorite Snack into CSS Art

Introduction:

In this submission, I'll be showcasing my CSS art inspired by my favorite snack.

Inspiration

"I chose to create CSS art for this challenge because I enjoy the creativity and technical aspects of designing with CSS.

Demo

Image description

Source Code: github.com/itxnargis/cup-cakes
Live Demo: itxnargis.github.io/cup-cakes/

Journey

You know, I've always been curious about working with CSS. There's something magical about turning thoughts into styles and seeing them come to life on the screen. When I decided to embark on this CSS challenge, I knew exactly what I wanted to make – the beloved cupcake, my absolute favorite.

At first, I aimed for simplicity. As I delved into the world of CSS, I had to deal with many sorts of problems – getting things in the right place, making colors blend nicely, and shaping stuff up.

Along the way, I made a rookie mistake: my cupcake was horizontally centered, but vertically... well, let's just say it took a while to get it right. I had to tweak and twirl many lines of code until, finally, it all fell into place.

After all this, the background color was white, but white was just too boring for me. So, I played around with some colors. After a bit of mixing and matching, I found the perfect backdrop – simple but eye-catching.

In the end, I realized that sometimes less truly is more. So, I just kept it simple and, at last, seeing my cupcake come together brought me joy.

This whole experience has been a revelation. Normally, you'd just grab an image for something like this, but there's something about crafting it yourself. It's like adding a pinch of your own magic to the mix. Overall, it was an AMAZING experience.

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

Top comments (1)

Collapse
 
itxshakil profile image
Shakil Alam

Yummy, It is really cool and I like your article too. It is very inspiring and seems real.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

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

Okay