This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Inspiration
Today, we are highlighting World Bicycle Day. Cycling has been a favorite hobby for both of us since we were kids, and it holds a special place in our hearts. When we saw the challenge post from the dev community, we thought it would be a perfect opportunity to celebrate our love for cycling. June 3rd, World Bicycle Day, is a day to promote cycling, its health benefits, and its positive impact on the environment.
Demo
Here is the CSS Art we created to celebrate World Bicycle Day:
Journey
Our journey in creating this CSS Art started with reflecting on our childhood memories of cycling and the joy it brought us. We wanted to capture the essence of a beautiful day spent riding a bicycle in the park.
Process
- Conceptualization: We brainstormed various elements that represent cycling and settled on a simple yet vibrant depiction of a bicycle against a scenic background.
- Design: We sketched the design on paper, focusing on the bicycle's structure, wheels, and the surrounding environment.
- Coding: Using CSS, we brought our sketch to life. We used various CSS properties such as border, border-radius, transform, and animation to create the bicycle and animate the wheels to give a sense of movement.
- Optimization: We refined the code to ensure it was clean and efficient, and we tested it across different browsers to ensure compatibility.
What We Learned
- CSS Techniques: We improved our skills in using CSS properties to create complex shapes and animations.
- Problem-Solving: We encountered and overcame challenges in aligning the elements and making the animation smooth.
- Teamwork: Working together allowed us to combine our strengths and ideas, resulting in a better final product.
Proud Moments
- Successfully animating the bicycle wheels to simulate motion.
- Creating a visually appealing scene that resonates with our personal experiences and the spirit of World Bicycle Day.
Next Steps
- Explore More Animations: We plan to delve deeper into CSS animations and transitions to create more dynamic art pieces.
- Interactive Elements: Adding interactivity to our CSS art to engage viewers more.
- Share and Inspire: We hope to share our journey and work with others to inspire them to explore CSS art and celebrate their passions through coding.
Team Members
@cssdru
@israebenboujema
Top comments (1)
Nice!