This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

June brings memories of my baby brother’s birthday; he turns 25 this year, no longer the little one he used to be.

Demo

Journey

Creating this CSS animation was a rewarding challenge that required a detailed understanding of various CSS properties and techniques. The process involved layering multiple elements to simulate a birthday cake with intricate shadow effects and a gift box animation.

Process:

Setup and Layout:

• Used flex for centering the main elements on the screen.
• Defined the base structure for the cake and the gift using basic CSS properties.

Cake Design:

• Utilized the box-shadow property creatively to add multiple layers to the cake.
• Applied pseudo-elements (::before and ::after) to add decorative parts like the white shadow and the number on the cake.

Gift Box Animation:

• Implemented a checkbox hack to control the animation state.
• Positioned the gift box and designed the ribbon using ::before and ::after.
• Used transition and transform properties to animate the gift opening effect.

Sparkles Animation:

• Created sparkles using small, circular elements with animated @keyframes to simulate a burst effect.
• Combined opacity, transform, and color animations for dynamic visual effects.