DEV Community

Cover image for Frontend-Challenge - December Edition by Manasi Netrekar
Manasi Netrekar
Manasi Netrekar

Posted on

6 7 5 6 8

Frontend-Challenge - December Edition by Manasi Netrekar

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

Image description

Image description

Image description

Image description

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!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (2)

Collapse
 
7892536388 profile image
Jyoti

Niceeeee

Collapse
 
elvita04 profile image
Elvita04

Wowwww!!!! Nice

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay