World Oceans Day

#frontendchallenge #devchallenge #css

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

World Oceans Day (June 8) represents the vital connection between humanity and our blue planet. Our oceans cover 71% of Earth's surface and produce over 50% of the oxygen we breathe.

This CSS art celebrates the beauty and importance of marine ecosystems through animated waves, coral reefs, and sea creatures.

Demo

Live Demo: World Oceans Day CSS Art

Journey

Creating this ocean scene was an exploration of CSS animations and gradients. I focused on creating flowing wave animations using keyframes and transform properties, while building a coral ecosystem with pure CSS shapes and colors.

The biggest challenge was making the waves feel natural and fluid - I experimented with different easing functions and timing to achieve the organic ocean movement.

I'm particularly proud of the layered depth effect created using z-index and opacity variations, giving the impression of looking down into ocean depths. The coral reef section uses creative border-radius and box-shadow techniques to create organic shapes.

Next, I'd love to add more interactive elements, perhaps fish that follow cursor movement or a day/night cycle that changes the ocean's appearance.