neography by

Alex Girón

A designer living in Old Town Alexandria San Francisco. Co-founder of nvite, canvas and nclud. Founder of worthy. Formerly Design Lead at twitter.

Our Solar System in CSS3.

Tuesday, May 18th, 2010

This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting.

These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

Our Solar System in Modern Browsers

Our Solar System

Take a look for yourself, using only CSS and HTML I managed to create a small simulation of our solar system.

For a better experience please view it on Safari, under chrome the animations lag for some reason.

The Details

Orbits and planets are all created using border-radius, while the animation is done via -webkit animation properties and transform. Below are examples of the code used.

border-radius

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Animations & Transforms

ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } }

Animations and transitions will only work on -webkit browsers, other modern browsers will display a static version of the solar system rendered using border-radius, with the exception of IE of course.

Internet Explorer’s Parallel Flat Universe:

Our Solar System in IE

Yep, in the eyes of Internet Explorer our universe is flat and boring.

So there you have it, I think it’s pretty impressive what we can accomplish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)