DEV Community

Cover image for June Frontend Challenge: Birthday Month
Tabassum Khanum
Tabassum Khanum

Posted on

June Frontend Challenge: Birthday Month

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.

Top comments (0)