This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.
Inspiration
When thinking about snacks that I love, I had to go back to a classic that I love now and when I was growing up. I'm still a beginner at CSS Art but Pocky seemed like a good, easy snack to create while learning more. I gained inspiration from
Demo
My Demo is relatively simple for now as I've just created different pocky with different colors. I want to update this later with maybe a more difficult flavor such as almond crush or cookies and cream which require more texture.
Journey
I started off by creating the basic shape of the pocky and moved towards shading it to look a little bit more like a stick than just a flat bar on the page. I learned about radial-gradient and played around with that. I also played around with ::before and ::after to add highlights to the sticks but it looked too fake so I removed them. I also wanted to include different flavors like almond crush but could not figure out how to imitate the shape of crushed almonds on the stick. I do think I have a path forward for at least shading for the crushed almonds and cookies and cream flavor -- which I think I use radial gradient to do.
Top comments (0)