Wednesday, June 12, 2024

The Download: Apple’s AI plans, and a carbon storage boom

At its Worldwide Developer Conference...

The Unrealized Potential Of Olfactory Design — Smashing Magazine

Kristian Mikhel covers various practical applications...

Recreating a GIF with CSS: Earth Day Edition

Programming LanguageRecreating a GIF with CSS: Earth Day Edition


This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

Inspiration

When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I haven’t done any “complex” animations with CSS alone, so this was the right time to try.

What I Built

Keeping in mind The above GIF, I created an animation of EARTH as in the GIF You can see the demo below

Demo

It’s doesn’t loop, so click rerun↗️ to replay

Journey

Upon reading the announcement and seeing the GIF, I got the idea of an animation like this. I had to attempt a CSS recreation. It was unique, outside my comfort zone, and something worth doing and sharing.

Working on it was both challenging and inspiring.
Happy coding 🙂

Check out our other content

Check out other tags:

Most Popular Articles