This is a submission for Frontend Challenge - December Edition, CSS Art: December.
Inspiration
For the month of December, I wanted to create something that evokes the feeling of winter and the Winter Solstice. A snow globe came to mind, symbolizing winter festivities, the holiday season, and the beauty of snowfall.
Demo
Here is a demo of my CSS Art: Git Link
You can view and interact with the code in CodePen: CodePen Link
Journey
I started by sketching out the basic shape of the snow globe, then used HTML to structure it. The key challenge was animating the snowfall effect with CSS animations. I used a radial gradient for the snowflakes and tweaked the keyframes for a smooth snowfall. The Christmas tree was made using a clip-path and linear gradient for the tree's look.
I learned a lot about CSS animations, especially how to combine them with JavaScript for more interactive elements like random snowflakes falling across the snow globe.
Next, I plan to experiment with adding more interactive features like a snow globe shaker effect using JavaScript.
Top comments (0)