Frontend CSS Art Challenge- Orange Candy Ice Cream

Inspiration

Orange Candy holds a special place in our hearts as a nostalgic snack, often enjoyed after a hot day at school during summer. Its sweet and tangy flavor, coupled with the refreshing chill of the ice, brings back memories of carefree childhood days. To pay homage to this beloved treat, I’ve transformed it into a minimalist CSS art piece, capturing the essence of those cherished moments.

Demo

Journey

My CSS Art inspiration image :

1. Planning the Layout: I started by planning the layout using flexbox to center the candy vertically and horizontally within the browser window.

2. Creating the Candy Shape: I created the main orange candy shape using CSS, applying border-radius to give it a rounded appearance and setting the background color to orange (#FF9800).

3. Adding Details: To add depth and realism, I used pseudo-elements :before and :after to create the curved ends of the candy, styling them with appropriate colors and box-shadows.

4. Designing the Stick: For the stick, I created another div inside the candy div and styled it to resemble a stick, using a lighter shade of brown (#decba0) and inset box-shadows to create a 3D effect.

5. Final Touches: Lastly, I adjusted positioning and dimensions to ensure everything looked cohesive and used margin and positioning properties to fine-tune the placement of each element within the candy wrapper.