Forem

Cover image for CSS Art: Earth Day 2024
Barry Els
Barry Els

Posted on

3 2

CSS Art: Earth Day 2024

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

Earth's composition is fascinating. I thought I'd take this opportunity to create a single page that covers some of its high-level layers.

Demo

Journey

I wondered how far you could get without having to rely on JavaScript. Admittedly, I had way too much fun with the spinning Earth portion, and ran out of time for the rest of the site (which is probably apparent 😅), but it was just fun to mess around with plain ol' CSS for a change and not think too hard about things.

Learned

I learnt a lot about Earth's composition, it's actually pretty difficult to summarise since there are various perspectives you could use as your lens, plus there's not a lot of direct measurements we can make about its deeper parts, for obvious reasons.

Next Steps

Things I'd like to get to:

  • Flesh out each of the layers with more detail
  • Add more animations per layer
  • Ensure everything's semantically and accessibly marked up

Credits

You can scroll all the way down to the bottom of the actual submission for credits, but also here:

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (2)

Collapse
 
steeve profile image
Steeve •

On firefox your earth is between flat and being a bagel.

Image description

On Chrome it looks round as expected :D
Congrats!

Collapse
 
barryels profile image
Barry Els •

Thank you so much for the feedback @steeve 🙌
I managed to fix it.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay