View Full Version : A CSS Solar System

11-10-2010, 12:21 AM
Found this earlier tonight and thought it was pretty impressive. It's a not to scale animation of the universe. The impressive part is it's all html and css. Here's the link.

Our Solar System (http://neography.com/experiment/circles/solarsystem/)

Before you check it out know that you need to view it either in Safari or Chrome. Safari is preferable as the developer says the animation lags a bit in Chrome.

All the circles are created using the -webkit-border-radius property. Basically you use a radius large enough so the squared box appears to be a circle. Firefox is also capable of doing this though the code is -moz-border-radius instead.

The movement is done using webkit transforms. This is why you need Safari or Chrome. FF doesn't do transforms at the moment, but I assume they will in time. Even better will be when IE handles all this stuff.

If you design and develop web pages you'll probably get excited about the possibilities like me. If you're neither then just enjoy the solar system.

11-10-2010, 08:47 AM
Very clever, how can this be used? he asks! Sure, it can make things move on a webpage but don't we have far too much moving stuff already? I usually turn off sound and wish there was some way to turn off animation when surfing.

Okay, movies are good. Short moving clips can now be created using HTML but we have that - what will we be able to do that we can't do now?

11-10-2010, 12:32 PM
I don't know that you would use the animation part as seen in this demo on a typical site, but you certainly could. What you would use is the ability to create curves and circles in code so you could do away with images for them. The -webkit-transforms are more capable than simply making things rotate around a center. They can be used for something like turning text on it's side so it reads vertical instead of horizontal and it can rotate text and other elements so they display at an angle.

Remember that all the elements of a web page are essentially a box, which can get dull. To break out of that box we've always needed to use images. When css3 is more widely adopted we won't have to use images as much, which reduces requests on the server and speeds up load time.

Also if you look closely at the solar system example you can see the sun actually has a gradient background and it has something of a halo around it. Both are things that previously were only done through images, but will soon be able to be achieved with code.

One last point is that code used to create the solar system does other things that what you see there. This is just one example of someone using the code. It's far from the only thing you can do with it.

11-10-2010, 01:12 PM
Yes, of course, the solar system displayed is only one way of using it. I was genuinely interested in what other ways this could be used. The halo, gradient background and text-on-the-slant are things I could use in right now on the new version of my website.

Okay! I approve. :-) When can I have one?

11-11-2010, 12:40 AM
Very cool.

11-11-2010, 02:28 AM
Frederick you can use all of this on Safari and Chrome (or any webkit based browser) right now. Most every browser (outside of IE) can handle the border radius to create circles. The transformation stuff is only on webkit browsers at the moment, but hopefully that will change soon. IE should be capable of displaying border radius in IE9 I think and hope.

11-11-2010, 01:44 PM
thanks for this vangogh.
I've been playing with some CCS3 elements recently but this was a little cooler then what I've been working on :)
My question is how will IE try to make this proprietary? (Microsoft rarely follows standard fully)

11-11-2010, 11:50 PM
My question is how will IE try to make this proprietary? (Microsoft rarely follows standard fully)
Dude.... Don't even get me started...

11-12-2010, 02:37 AM
I think they've finally learned that we aren't paying attention to the proprietary stuff anymore. Look how IE's market share has sunk the last few years. if they don't catch up with the standards soon they'll find themselves as the 4th or even 5th most popular browser.

Although to be nice to them and give them some credit IE9 seems like it is going to catch up with most things and that Ajax stuff we've all come to love evolved out one of those proprietary IE things. IE could do Ajax years before anyone else could.

I'm still playing with css3 in limited ways. It didn't seem realistic to use it until recently though now even if IE doesn't quite catch up their are plenty of javascript libraries to make things work in iE so you can use lots of css3 cross browser. Or just go the progressive enhancement way and add the cool stuff for the cool kids using the cool browsers.