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
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:
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 ;-)
68 Comments
Super cool! Only, Pluto isn’t a planet anymore…
@Jacy, yeah I knew that but decided to leave it in… I call this our Old School Solar System :-)
Internet Explorer, the browser for squares.
Great stuff…
Can you make it to Science Hackday? :)
http://blog.andyhume.net/solar-system-model-in-css
http://sciencehackday.com/
The animations lag in Chrome because only Safari (on Snow Leopard) and MobileSafari (on recent versions of iPhone OS) do hardware-acceleration of –webkit-transform animations. Here’s more than you ever wanted to know about this.
Very well executed. Great stuff.
Excellent! One issue though: when you view the solar system page on an iPad in landscape mode, the “On Twitter” and “About this Experiment” buttons get drawn in the middle of the document.
@Andy Hah! Awesome, small world…
@Andrew I see, thanks for the info.
@Tito I’ll look into it, thanks!
Except for the animation and Jupiter, it looks fine on Internet Explorer 9.
Saturn, damn it.
very nice , I like the moon so much Great job
Um… this is quite superb.
Looking good Alex.
Andrew D– right, funny how it animates smooth as butter on my iphone but stutters on my core i7 machine in Chrome. Hope Chrome 6 has D2D acceleration out of the box!
This is truly awesome. Love it.
Man, you gotta love IE sometimes just for the humor. Kind of like that annoying kid brother that’s always lingering around.
This is another great example of CSS in modern browsers. It was just yesterday that I saw the CSS icons like iphone / heart made with CSS.
Hey.. This is pretty cool stuff. Nice way to display css3!
awesome!! =)
This is really inspiring stuff. Congratulations, Alex :)
Awesome! You can really do a lot of things with animation and rounded corners. Try out that bouncing navigation (without javascript)!
Really great job, grats
However, the animation simply eats up my CPU. Dont kill me :) but still flash would be more optimal from this point of view.
Very well done, congrats. Our universe really looks a little weird on the IE ;-). Amazing to see what’s possible with CSS3.
What a gorgeous Webkit example. Really great stuff!
awesome…
Pluto’s inclusion is justified. Like the saying goes: My Very Elegant Mother Just Showed Us Nine Planets! :P
Great work!
The world doesn’t move that fast. It takes 24 Hours for the Earth to orbit the Sun.
I’m actually offended to see this on my screen.
“Earth orbit Sin in 24 hours.” Oh Peter, you’re such a tool. ;) As for the animation: kudos!
Many congrats.
“Yep, in the eyes of Internet Explorer our universe is flat and boring”: this is the most appropriate metaphora.
@Peter assuming you were being serious, you should probably seek additional schooling — the Earth orbits the Sun once a year, roughly every 365 days.
@Alex excellent job, very impressive!
excellent idea, great work! respect
People are boring. Pluto is too a planet: a dwarf planet. It has more moons than your precious Earth, pessimists.
Anyway: fantastic work!
Great experiment. And I like the IE metaphor :)
Great stuff. Very nicely done!
This is like SO COOL!
Whilst I think that using CSS to do complex animations is stretching the friendship a little bit, I must say that that is pretty cool!! Great work
so interest develop of CSS code
so grow up to fast
thanks
Great! The effect is really cool and impressive. Nice work :)
Que bonito.
Gracias
Damn impressive work…thanks for sharing this. And I also love your comment area formatting!!!
Have to admit — there’s something a bit design-sexy about IE’s interpretation! Retro and bitmapped almost.
@Floatr the animation runs about 8 — 10% CPU on my 13″ Macbook Pro, whereas Flash would be somewhere like 50 — 100%.
impressiv experiment. Thank you for sharing
Very cool, but not technically accurate. The moon orbits Earth more than 6 times in an orbit of the Sun… Sorry :(
Oh, and not all orbits are dead circles… Plus, I think Jupiter should be a little bigger than the rest of them :P hahaha.
In any case, absolutely totally awesome!! Well done!!
Once again, shouldn’t the early versions of Microsoft’s browser (up to 7 or so) be more accurately termed “Internet Exploder?” “Parallel flat universe” indeed!
i really like this one! very nice inspiration, dude. thanks for sharing.
Very great! really cool
That’s amazing, great work
Freakin Brilliant, Thanks for sharing
Good job, although Pluto’s orbit is not perfectly circular.
Yeah, push Your Web Design Into The Future With CSS3!
Inaccurate but awesome. I especially like the shadow of earth cast on the moon.
@everyone Thanks for the comments. I had lot of fun putting it together.
The simulation was never meant to be a 100% accurate, rather more like an info-graphic.
Nice Work, Great!
Perfect, is very work
Typekit really needs to resolve FF display issues, otherwise this is a great experiment.
Very, very cool.
However, Pluto is not considered a planet anymore ^_^
http://books.google.com/books?id=abQNU7IGLoIC&pg=PA11&lpg=PA11&dq=why+isn%27t+pluto+a+planet&source=bl&ots=nnQ18BOxIV&sig=0V62jigx8mW8IS7A-inKS_adzOM&hl=en&ei=B0z8S5nEOsP38AbvkMGTBg&sa=X&oi=book_result&ct=result&resnum=6&ved=0CC8Q6AEwBQ#v=onepage&q&f=false
I’m amazed at what can be done with CSS these days. I’m an old school tables guy who kicked a screamed at the thought of converting to CSS … after using it for nearly a year, I wish I had converted sooner ;-)
Excellent use of the new standards, thank you for creating it.
… Scott
… oh, and I forgot to comment on the commenting structure …
I love the way it runs horizontal, different, and unique.
… Scott
awesome…!!!
Excellent Work..
Good test of Chrome — on my MBP with Chrome CPU usage for i core goes to 98% (in Safari it’s ~6%). We have a way to go until HTML 5/CSS 3 is the answer.
It’s awesome, I love it, only one bit of constructive criticism would be more accurate orbits, but I don’t know how feasible this would be with the current HTML5/CSS3, or how many hours it would take (probably too many for a simple tech demo) It’s brilliant though, and shows how useless flash is in the long term.
Next, Halley’s comet?
I love this! It’s exciting to see glimpses into the future of the web. Thank you so much for putting this together!
Very nice! My 4-year-old won’t appreciate the elegance of your code, but he’ll love this nonetheless. (Though he’ll also be quick to point out the problem with Pluto’s orbit.)
I do see the CPU spike others have pointed out (using Chrome on XP). No doubt this is being addressed in some stage of development.
Also agree that this format for viewing comments is wonderful!
Regards,
John Doyle
Impressive !
As a CSS3 exercise this is fantastic, but, as I’m sure you’re aware, Flash was doing this more than a decade ago. As I’m also sure you’re aware, this is scientifically comical and can not be rectified using any amount of CSS. For an example of Flash’s power, check out http://j.mp/cxMpGq.
Also, your comment display is obnoxious and a prime example of over design getting in the way of usability.
@everyone, again thanks for the awesome comments.
For those saying the experiment isn’t scientifically accurate, well it wasn’t meant to be, it’s purely an exercise about CSS3 capabilities.
Closing comments on this one… Till next time!