Mozilla

Firefox 4 Demos: Awesome CSS3 Planetarium

O hai pixel lovers! Check out this gorgeous CSS3 demo: Planetarium, by the LittleWorkshop team (@glecollinet & @whatthefranck).

planetarium

Screencast:

Youtube link.

Gorgeous Animations

The principal feature show-cased in this demo is CSS3 Transitions. The animation between the welcome-screen and the planet-screen, and the animation between the different planets are powered by transitions. But there are many little effects in this demo. Take a look at the Twitter button, the ruler, the credit page or the back button. These effects are CSS3 Transitions too.

Another interesting detail. Next to the planet, you have some different animations. The way the animations is played depends on if you’re coming from the left, the right or from the home screen.

Try it yourself: Click on the planet Earth, from the home screen. See the text “falling” from the top? Now, go to Mars, and come back to Earth. Now the text is “flying” from the right. Designers will love that :)

Beautiful fonts

@font-face allows you to use your own font for creative design. Combined with text-shadow and font-feature-settings, you can accurately forge and style your typographic content.

Your turn!

These are features you can use today.
This demo works perfectly in Firefox 4, Safari and Chrome. Also, Transitions and font-face are easily degradable. Go. Check out the source code, read the documention, and if you’re proud of your code, feel free to submit a demo!

27 comments

Comments are now closed.

  1. Lucas wrote on March 16th, 2011 at 10:57:

    Poor Pluto.

  2. Matt wrote on March 16th, 2011 at 11:15:

    The advancement of the web is so awesome right now!

    Mozilla you guys rock, keep up the superb work.

  3. j2 wrote on March 16th, 2011 at 12:16:

    Zooming and zooming out (on Safari) doesn’t exactly behave as expected (note the space view – zooming in results in SMALLER planets). Is this what we can expect from CSS3?

    1. Rich wrote on March 16th, 2011 at 12:57:

      No, it’s just that they’ve decided to size the planets so they always fit on the screen. That means that zooming in makes the planets realign to fit.

      They didn’t have to code it like that, but I can’t think of a better way to design this demo that wouldn’t have that behaviour.

      It’s got nothing to do with CSS3.

  4. vdo wrote on March 16th, 2011 at 12:55:

    Very impressive BUT for me, this is not a CSS3 demo. This is a CSS3+HTML5+JS demo. I think we (developers) have to make the difference between new web technologies. What do you think ?

  5. Evan Reeves wrote on March 16th, 2011 at 17:28:

    Does this mean that relevant and useful content on the web will continue to erode in place of fancy-schmancy animated infographics?

  6. Mr.doob wrote on March 16th, 2011 at 20:17:

    Beautiful!

  7. jonas wrote on March 16th, 2011 at 21:07:

    Looks really awesome!

    But i think, i’ve found a small bug: the “view credits”-link from the home screen is still clickable (though not visible) when zoomed to a planet (the clickable area is somewhere near the “DISTANCE FROM THE SUN”-label, depending on the size of the browser window).

  8. Ken Saunders wrote on March 16th, 2011 at 23:04:

    Simply awesome! Very sharp. Very cool.

    Uranus is really quite large.
    Perhaps you should see a doctor about that. :|
    (some people never grow up)

    \Poor Pluto.\
    +1

  9. Ken Saunders wrote on March 16th, 2011 at 23:20:

    This looks great in full screen, and it scales very well when zooming in.
    I love it.

    That little ticket link to the demos is also cool.

  10. hugo wrote on March 16th, 2011 at 23:31:

    For Mercury, it says “…is the […] densest planet of the Solar System”.
    And for Earth, it says “…is […] the densest […] of the eight planets in the Solar System.”

    Probably only one planet is the densest one (hint: http://en.wikipedia.org/wiki/List_of_Solar_System_objects_in_hydrostatic_equilibrium#Planets )

  11. Henry wrote on March 17th, 2011 at 09:46:

    I’m sorry to write this, but i tried the demo on firefox 4.0 and on Chrome 10. The result is much better on Chrome (on firefox is slower) can anyone explains this.

  12. Kawika wrote on March 17th, 2011 at 11:15:

    Whoa. This is… gamechanging.

  13. Ken Saunders wrote on March 18th, 2011 at 08:46:

    \Does this mean that relevant and useful content on the web will continue to erode in place of fancy-schmancy animated infographics?\

    Oh brother.
    Ya, soon it will just be all porn beamed directly to your brain.

    Ask a student if they’d prefer to learn about the Solar System this way, or in a book, or on Wikipedia.
    Ask anyone would they prefer to learn about anything through visual interactive means or by static ones.

    \I’m sorry to write this, but i tried the demo on firefox 4.0 and on Chrome 10. The result is much better on Chrome (on firefox is slower)\

    That’s because Chrome rocks and Firefox sucks!
    Seriously, why does Mozilla even bother?
    God himself has nothing on Chrome.

  14. nemo wrote on March 21st, 2011 at 07:30:

    @vdo
    If you disable javascript, you’ll see it is indeed a CSS demo. Well, CSS + SVG really, but a whole lot of CSS.

    The trick is, and I e-mailed the guys this, that you have to first enter the planetarium *then* disable javascript in options, since pretty much the only part that doesn’t degrade gracefully is the front loading screen.

    You can’t disable in firebug ’cause it’ll force a reload.

    But anyway, once you’ve done that you’ll see it is indeed mostly CSS. Quite impressive.

  15. vdo wrote on March 21st, 2011 at 09:09:

    @nemo:
    “*then* disable javascript” : ok that’s what i say! This demo need javascript…

  16. nemo wrote on March 23rd, 2011 at 13:41:

    Well. That’s my point. They didn’t actually *need* javascript.
    They just neglected to make the loading screen degrade gracefully.
    Almost then entire demo is CSS + SVG.
    There are some stats which load in javascript (although they could have degrade to non-javascript too, since the JS was just used for some spinning numbers).

    Anyway. It is one thing to just be a bit sloppy in degrading gracefully on a load screen, and another to have done the entire thing in javascript. It is still an awesome CSS/SVG demo.

  17. Antwan wrote on March 24th, 2011 at 09:50:

    Awesome concept of NEXT/PREVIOUS cursor-sticking arrows :D

  18. Stephen wrote on March 25th, 2011 at 06:33:

    Has anyone checked this out in IE9.0.. its so sad!

  19. badlybrad wrote on April 20th, 2011 at 22:57:

    I think that its an awesome format form. I like the way the planet are line up, but I probably would had created the planets rotating around the sun and when a user hover over the planet it stop rotating around the sun and then a screen is popped up with all of the planets information that Nasa can provide. I like astronomy and this could alternate your great idea into realistic idea, instead of the lining of the planets and scrolling. This is just a thought because I can’t do any of it honestly, but I’m just now learning about how to use notebook 2 and html in college. Looking at this or any other web page I can get some advanced ideas, but can’t do them myself. Other than that, I think that this is a very good idea because most people like objects and amazing image displays on web pages. Its like no body like to read anymore but to see visual effects displayed in text and images. I really like this format though.

  20. Carlo Rizzante wrote on April 27th, 2011 at 04:44:

    Well, ehj, this is cool. Sweet graphic, too.

    It’s also time that the average Joe will dedicate some minutes thinking about the out there. So, welcome your good work!

    I enjoyed it, thanks.
    Carlo

  21. JM wrote on May 17th, 2011 at 15:16:

    It’s awesome! I’ll build everything in HTML 5 and CSS 3 and SVG and tell people to stop using Internet Explorer… oh I’m sorry, but I’ll have to play the party pooper card again. You know, there’s always one, sorry about that. :-)

    This doesn’t even degrade gracefully in IE 8, it just sits there spinning pitifully. I hate these demos because they show us what we *could* do, commercially, in a few years maybe, when IE has caught up with the rest and the IE users have caught up with the latest IE. Unless your commercial audience is web designers, your first point of business should be to make sure the site is at least serviceable in IE. If you don’t have that, all the cool stuff in the world won’t make up for it. (And yes, this is of course a site specifically hosted on a domain intended to do Firefox demos and it has no commercial goal — I’m not arguing that this site specifically has a problem, but it does illustrate the issue.)

    It’s like being shown an awesome car that unfortunately isn’t allowed to drive on highways yet. Sure, you can have fun with it, but it’ll remain a hobby. The cooler these sites are (and this one is without a doubt very cool, as cool as the acid cloud layers of Venus) the worse this stings. Maximizing the audience would mean this site would have to be built in Flash, which would surely please no-one (except Adobe, of course).

  22. Joys Acevedo wrote on August 4th, 2011 at 18:50:

    I love this code page….. i we learn html 5

  23. Doug wrote on January 4th, 2013 at 09:18:

    The link’s currently 403ing.

    1. Robert Nyman wrote on January 8th, 2013 at 12:26:

      Thanks for the heads-up. I’ve corrected the link to the Planetarium now.

  24. Doug wrote on January 9th, 2013 at 02:15:

    Don’t forget the call to action graphic :)

    1. Robert Nyman wrote on January 10th, 2013 at 02:56:

      Thanks. :-)

Comments are closed for this article.