June Frontend Challenge: Birthday Month

#frontendchallenge #devchallenge #css

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.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.