This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Inspiration
For this Frontend Challenge, I wanted to honor our amazing planet and celebrate Earth Day with CSS art. Inspired by the iconic “pale blue dot” words from Carl Sagan, I tried to make a visual representation that captures the beauty and significance of Earth in our universe.
Demo
Journey
Participating in this CSS art challenge was a fun and educational experience. I used CSS animations to make the Earth spin smoothly. By adding keyframes to the background-position property, I created the illusion of rotation.
The starry space background is also made with just CSS! I put two pictures together and used a special CSS property ‘background-blend-mode’ to simulate movement. This technique seamlessly merges the images resulting in a big space scene. It shows how amazing the Earth is in our vast universe.
I’m excited to have joined this challenge! It provided a great opportunity to learn new skills and unleash creativity with CSS.
