The latest articles on DEV Community by Julie Zhou (@julzhou6). https://dev.to/julzhou6 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1352909%2F739f608c-ed72-4958-a18a-c55f7553910f.jpeg https://dev.to/julzhou6 en Julie Zhou Mon, 01 Apr 2024 04:01:29 +0000 https://dev.to/julzhou6/css-favorite-snack-pocky-4d3p https://dev.to/julzhou6/css-favorite-snack-pocky-4d3p <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>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 </p> <h2> Demo </h2> <p>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. <br> <iframe height="600" src="https://codepen.io/julzhou6/embed/OJGpzLL?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>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 <code>radial-gradient</code> and played around with that. I also played around with <code>::before</code> and <code>::after</code> 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 <code>radial gradient</code> to do. </p> frontendchallenge devchallenge