neography by

Alex Girón

A designer and entrepreneur living in Old Town Alexandria San Francisco. Cofounder of nclud and canvas. Founder of worthy. Formerly Design Lead at twitter.

Our Solar Sys­tem in CSS3.

Tuesday, May 18th, 2010

This is an attempt to recre­ate our solar sys­tem using CSS3 fea­tures such as border-radius, trans­forms and anim­a­tions. The res­ult is sur­pris­ing and quite interesting.

These past few months I’ve been explor­ing CSS3, try­ing to learn some of it’s new fea­tures and get­ting a feel for which browsers sup­port it. A few weeks back I put out my first exper­i­ment explor­ing @font-face and trans­forms. This time, I set out to exper­i­ment with border-radius, and what I thought was going to be a bor­ing little pro­ject turned out to be quite interesting.

Our Solar Sys­tem in Mod­ern Browsers

Our Solar System

Take a look for your­self, using only CSS and HTML I man­aged to cre­ate a small sim­u­la­tion of our solar system.

For a bet­ter exper­i­ence please view it on Safari, under chrome the anim­a­tions lag for some reason.

The Details

Orbits and plan­ets are all cre­ated using border-radius, while the anim­a­tion is done via –web­kit anim­a­tion prop­er­ties and trans­form. 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;
}

Anim­a­tions & 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) } }

Anim­a­tions and trans­itions will only work on –web­kit browsers, other mod­ern browsers will dis­play a static ver­sion of the solar sys­tem rendered using border-radius, with the excep­tion of IE of course.

Inter­net Explorer’s Par­al­lel Flat Universe:

Our Solar System in IE

Yep, in the eyes of Inter­net Explorer our uni­verse is flat and boring.

So there you have it, I think it’s pretty impress­ive what we can accom­plish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)