Alex Girón

Designer & Founder. Building Join Team. Creative Director at Eventbrite, Formerly Design Lead at twitter. Founder at nvite, canvas, nclud, worthy.

Our Sol­ar Sys­tem in CSS3.

Tuesday, May 18th, 2010

This is an attempt to recre­ate our sol­ar sys­tem using CSS3 fea­tures such as bor­der-radi­us, trans­forms and anim­a­tions. The res­ult is sur­pris­ing and quite inter­est­ing.

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 bor­der-radi­us, and what I thought was going to be a bor­ing little pro­ject turned out to be quite inter­est­ing.

Our Sol­ar 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 sol­ar sys­tem.

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

The Details

Orbits and plan­ets are all cre­ated using bor­der-radi­us, 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.

bor­der-radi­us

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

Anim­a­tions & Trans­forms

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, oth­er mod­ern browsers will dis­play a stat­ic ver­sion of the sol­ar sys­tem rendered using bor­der-radi­us, with the excep­tion of IE of course.

Inter­net Explorer­’s Par­al­lel Flat Uni­verse:

Our Solar System in IE

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

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 ;-)