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

Inspiration

In selecting a snack for this challenge, my heart (and stomach) immediately went to chips—my all-time favorite snack that I simply can't resist. The irresistible crunch of a perfectly fried chip has a kind of magic that I sought to encapsulate through CSS. Beyond their delightful variety of flavors and forms, chips carry with them a sense of nostalgia and comfort. They transport me back to joyful moments, from lazy afternoons in the park to heartwarming movie marathons and lively get-togethers with loved ones. My ambition with this project was to craft more than just a visual representation of chips; I aimed to create a mosaic tableau that captures the essence of those cherished memories and the universal love for this snack.

Demo

I'm excited to present my CSS art project that vividly brings the simple yet beloved chip to your screen, blending CSS3 and HTML5 to replicate the chip's unique texture and colorful packaging. Check out the project here:

, and for a peek into the crafting process, here's my code: [https://github.com/Rouaa-Belhaj-Ali/css-art-favorite-snack-].

attempted to upload an animated demo illustrating the interactivity of CSS on a development platform, but unfortunately, I encountered difficulties and couldn't do so. The demo actually demonstrates how the GIF components move. I've seen numerous interactive demo videos, so if anyone reading this has information, please do let me know! thanks ! 😊

Journey

I initially felt I hadn't explored CSS as much as I could have, especially after shifting my focus towards backend languages. This challenge presented a fantastic opportunity to dive back into the world of CSS, allowing me to truly appreciate its elegance and capabilities.