Frontend-Challenge - December Edition by Manasi Netrekar

Manasi Netrekar — Sun, 29 Dec 2024 17:01:23 +0000

Inspiration

I was inspired by the magic of the winter solstice and wanted to create a CSS art piece that reflects the beauty of the season. The soft snow, the glowing moon, and the serene landscape inspired me to try something minimalistic yet impactful.

Demo

Here’s the CSS Art project
Demo link (https://youtu.be/6kHx3QRxl1E?si=5rP2Xxd0JojJLvPG)

Github Link:https://github.com/ManasiRN/DEV

Feel free to explore the full code on CodePen.

Journey

Process:
I started by brainstorming ideas for a winter-themed art piece, focusing on key elements like snow, stars, and a cozy atmosphere.
I used CSS gradients for the background and created layered snowflakes using ::before and ::after pseudo-elements.
To add life, I included animations for falling snow (keyframes), making the scene dynamic and immersive.

What I Learned:

Creating realistic animations using keyframes.
Experimenting with clip-path to create custom shapes for mountains and moonlight.
The importance of layering and blending modes for achieving depth in CSS art.

Challenges Faced:

Aligning animations to make the snowfall look natural.
Adjusting responsiveness while maintaining the aesthetic balance.
Fine-tuning colors for a harmonious winter palette.

What’s Next:

Adding interactivity using JavaScript, like hovering effects or a “snowfall toggle” button.
Exploring different seasonal themes for future projects.

Team Submissions

This was a solo project, but I’d love to collaborate on future challenges with the community!

DEV Community: Manasi Netrekar