CSS CELEBRATION Art

winslause — Sat, 28 Dec 2024 06:44:53 +0000

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

December brings warmth, family gatherings, and celebrations, especially for my family. We have a unique tradition where houses are decorated with colorful balloons, children are playing outside, and women are busy cooking delicious meals. A cow is tied outside, peacefully feeding as part of the tradition. This scene reflects the joy, love, and togetherness that we feel during the Christmas celebrations.

Demo

You can view my animated CSS family ceremony scene in this: https://winslause.github.io/css-fantasy/ completing the celebration atmosphere.

Journey

While working on this CSS art, I aimed to capture the essence of a traditional family celebration during Christmas in my culture. I started by sketching the scene in my mind and breaking it down into simpler elements.

Key Lessons:
I explored CSS animations to add life to the scene, making the balloons float and children jump around.
I learned how to create simple shapes using CSS, especially by leveraging border-radius and keyframes for animation.
The biggest challenge was translating a mental image into a web-based visual with only CSS. The joy of seeing it come to life was definitely the most rewarding part of the process.
In the future, I’d like to add more interactivity to the scene, such as clickable elements that reveal more details of the celebration or even more intricate animations.

Front-end Challenge

winslause — Sat, 28 Dec 2024 06:07:09 +0000

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

For this Frontend Challenge, I created an interactive and visually dynamic landing page to celebrate the Winter Solstice. The page aims to highlight the astronomical and cultural significance of the event while offering an engaging, smooth user experience. Key features include:

Responsive Design: A collapsible navigation bar that adjusts to different screen sizes.
Light and Dark Mode Toggle: A button that allows users to switch between light and dark modes, enhancing accessibility and user experience.
Wave Animation on Headers: Interactive headers that feature a subtle wave animation, making the page feel dynamic and lively.
Bright Hover Effects: Various header elements change color when hovered over, giving a modern and playful touch to the page.
Custom Button Styling: A floating button for light/dark mode with a stylish design that stands out while keeping the layout clean.
The goal was to combine aesthetics with functionality, delivering an engaging user experience, while also focusing on accessibility.

Demo

You can check out the live demo and code on GitHub here:https://winslause.github.io/Winter-Solstice-Landing-Page/

Journey

This project was an exciting challenge that allowed me to experiment with both CSS animations and JavaScript functionalities to bring interactivity to a simple landing page. Some key aspects I learned and enjoyed during this project include:

CSS Animations: Implementing keyframe-based animations (such as the wave effect) allowed me to create an interactive user experience without relying on JavaScript for animations.
Responsive Design: I focused heavily on ensuring that the page looks great across all devices, from desktop to mobile. This required understanding of CSS Flexbox, media queries, and how to make the navbar behave responsively.
Light/Dark Mode: Adding a toggle for light/dark mode not only increased user engagement but also made the page more accessible. It was a fun implementation using just a bit of JavaScript to manipulate CSS variables.
Hover Effects: I implemented hover animations with vibrant colors, which added an extra layer of visual feedback when users interact with different elements on the page.
I'm particularly proud of how the wave animations and hover effects tie together to create a modern, interactive vibe for the page. Moving forward, I'd love to improve the performance of the animations and possibly incorporate more interactive elements, like scroll-triggered animations, or integrate real-time data about the Winter Solstice.

What I Hope to Do Next
Next, I plan to enhance the functionality of the page by adding more dynamic content, such as integrating data visualizations about the solstice (e.g., comparing day length across different locations) and improving the layout further for mobile-first accessibility. Additionally, I’m considering making the page more interactive with the integration of an API for real-time information related to the solstice.

DEV Community: winslause

CSS CELEBRATION Art

Inspiration

Demo

Journey

Front-end Challenge

What I Built

Demo

Journey