DEV Community

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

Posted on

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:

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.