
Very impressive CSS3 demo: CSS3 Planetarium - thankuz
http://hacks.mozilla.org/2011/03/css3-planetarium/
======
stevelosh
And here's what it looks like in IE9: <http://twitpic.com/4a3kyw/full>

~~~
mrspandex
Also doesn't work in FF 3.6 or Opera 11...

~~~
leftnode
They weren't just released yesterday...

------
mrspeaker
That is really awesome - but one thing (which is just an observation, not a
complaint) I've noticed with all the CSS3 super-cool demos like this is that
everything is very "linear". All the animation stuff happens in straight lines
or repeating patterns (of circles, in the demo) which gives the page a certain
feel.

I wonder if it's the start of an effect that will eventually be used to
carbon-date websites... "Ah look at this specimen - table based layout, and
JavaScript littered with variable names beginning with "mm_" from the late
Dreamweaver era. Oooh, now look here... completely linear animations... my
guess is it's early 2011! And in such condition!"

~~~
Groxx
That's interesting... I don't know if it's possible to animate directly on a
bezier curve, though that'd be an extremely-useful thing to be able to do.

It looks like all the animatable properties just have ease-in / out timing,
and go from A to B. Given that, the best you could do is animate each X/Y
direction's behavior, creating a new animation at each bezier curve point, and
using the bezier form of the timing function to mimic curved paths.

<https://developer.mozilla.org/en/css/css_transitions> and
<https://developer.mozilla.org/en/css/css_transitions>

~~~
bzbarsky
The timing function can be an arbitrary cubic bezier; some common ones like
ease-in/out and so forth have dedicated keywords.

You should be able to get arbitrary bezier paths if you pick your x and y
timing beziers carefully, I'd think... But it does take some thinking.

------
franck
Developer here.

We are glad that many of you found our demo interesting. The point was to
explore how we could apply some new browser features to present educational
content in an interactive/immersive way.

Sorry about Pluto fans – we were also sad not to include it. We should have
put it as an easter egg!

Thanks to people who reported typo/content errors.

We cannot fix them right now though – because we have no control over
Mozilla's site. We'll push an update when we get the chance.

~~~
isleyaardvark
Ok, can I gripe about the text that says this about Saturn: "Despite its size
(9.4 Earths)..."? While the diameter is 9.4 times that of Earth, the size of
Saturn is way larger than 9 individual Earths. Volume-wise you could fit 764
Earths inside Saturn, and that would be a more appropriate metric. The weird
hexagon storm on Saturn alone is the size of 4 Earths.

------
jarin
Looks very nice, reminds me of the Elements app for iPad.

P.S. I don't know about you guys, but it still bugs me whenever I don't see
Pluto.

~~~
nkassis
and the ton of other ice dwarfs in the far end of the solar system? Let it
rest. Pluto is the first of a new class.

------
cosgroveb
It says Mt. Everest is 8848KM tall... I believe that should be Meters.

------
micheljansen
It looks awesome on Chrome, but there is a slight glitch in the shape of a
flash that occurs once all animation appears to have finished. Anyone else
experiencing this?

~~~
Griever
On Chrome Dev 11.0.696.12 and I'm experiencing the same thing. Seems like a
minor complaint though as the rest of the site works flawlessly.

------
splatcollision
Good stuff. Github page is here:
<http://github.com/littleworkshop/planetarium>

------
checker
The article points it out, but the text comes in from different directions
depending on whether you're clicking on the planet or scrolling to it from the
side.

Nice touch.

------
sho_hn
One thing I notice is that I can't select most of the text. I'd like HTML
sites to do better than Flash in this regard -- conformance to established
HTML behavior is supposed to be an advantage.

~~~
bzbarsky
This looks like a purposeful action by the page: it calls preventDefault on
mousedown events for some reason. :(

------
rheide
I feel sorry for Pluto :(

------
rkalla
I still read this word as "Planeh-arium" in my head. Maybe a bad reference :)

------
duck
Very cool, but on every planet I wanted to be able to spin it on it's axis.
That would be a _demo_.

------
nborgo
Moving the left and right arrows with the cursor is a great idea, especially
since they don't move until you get close. It might be nicer if they would
animate to the position when you first move the cursor over, though. It's kind
of jumpy as is.

That pattern just might catch on.

~~~
syaz1
There's a bug though. If you click on first/last planet then the arrow will
not appear at all. Naturally you expect right arrow when clicking the first
planet. Vice versa.

------
necolas
Really impressive, but it's a shame that this is being labelled "CSS3" or
"HTML5" when clearly it relies on a lot of JavaScript. It's a great example of
weaving several front-end technologies together...and there should be nothing
wrong with saying so.

------
crowdcs
I let out a sigh when I saw redundant but understandably necessary function
calls to support all browsers. Is there hope in seeing stuff like this
consolidated anytime soon? -moz-transform:... -webkit-transform:...
-o-transform:... transform:...

~~~
grayrest
Not really. The prefixes allow vendors to do experimental stuff without
creating (as much) of a backwards compatiblity problem before things
standardize. If you don't like it, use a preprocessor:

* <http://sass-lang.com/> * <http://lesscss.org/> * <http://learnboost.github.com/stylus/>

The last one is the most promising since it can be made to look exactly like
standard css, but it's really rough right now.

~~~
nathos
Sass, at least with its default SCSS syntax, is a strict superset of CSS3 so
it's a good place to start. Your existing CSS files can be processed by Sass
without changes.

Combined with some of the great mixins provided with Compass:
[http://beta.compass-
style.org/reference/compass/css3/transfo...](http://beta.compass-
style.org/reference/compass/css3/transform/), you can eliminate many of the
vendor specific declarations.

~~~
grayrest
They all either are or can be strict supersets of CSS3. What separates stylus
is that you can write valid, non-superset CSS3 and invoke the appropriate
functions/mixins:

    
    
        @import css3
    
        #transparent {
            opacity: 0.6;
        }
    
        ----
    
        #transparent {
          opacity: 0.6;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
        }
    

That's input/output in stylus. This uses an `opacity` mixin defined that's
being invoked without the optional parentheses and with the optional
colon+semicolon.

I have the beginnings of the Compass CSS3 library that's on hold while TJ
fixes bugs and adds features to cover edge cases. The eventual goal is the
ability to write straight CSS3 and have everything work.

------
estel
It does seem a bit odd that all three major browser vendors are able to
release interesting web-apps that only run at full-speed in their own
browsers. Do they intentionally exploit some exclusive feature to show the
other browsers up?

~~~
franck
There was not any attempt to make it run faster in Firefox 4. The goal is to
showcase the Web as a platform and its possibilities. There is clearly no
point in making it run well only in one browser.

Besides, we developed this demo on OSX, where performance is comparable among
all three supported browsers.

------
kpozin
Works very well in Chrome 10.0 beta, barely runs in Firefox 4 RC1 on the same
machine. Oh, the irony.

------
kevingadd
Works perfectly in the latest mobile build of firefox (albeit slowly), which
is a pleasant surprise - I expected it not to. Alas, for some reason the stock
android browser can't even finish loading it.

------
ch0wn
It works perfectly fine in Chrome, but runs very sluggish compared to FF4.
Does anyone know which particular part is so much faster in Firefox?

------
robertk
Apparently both Earth and Mercury are the densest planets in the solar
system...

~~~
baddox
While that's certainly possible (if they had the same density and no planet
was more dense), it's more likely a copy and paste error.

------
emehrkay
My son has to see this

------
J3L2404
Crashes Safari on iPad iOS 4.3

[EDIT] On iPad 1.

~~~
gnok
It rendered somewhat incorrectly for me, but it was smooth and didn't crash.
I'm on Safari on iPad 2 iOS 4.3.

------
pluto
Hmpfh.

~~~
sorbus
Ah, novelty accounts. Could we please keep those to reddit, if you don't mind?

------
mconnors
Something you can make in flash in like 10 minutes- and it works on everything
( not mobile ).

~~~
richbradshaw
We might as well just drop the whole idea of HTML, JS and CSS and just use 3rd
party plugins to replace the whole thing. That totally makes sense. Innovation
is for idiots.

~~~
kenjackson
First, innovation doesn't only happen in a single application and runtime (the
browser). Flash has innovated as much as FF4 has. It's weird that the
distribution model for the runtime defines what is innovation and what isn't.
A runtime that is distributed as a plugin is inherently not innovative, while
one that is a monolithic application is. Go figure.

And I think the point of the original poster isn't that we should drop HTML.
But rather that this application isn't cool on first principles. You can show
this same app to your child as a Flash app and your child should be just as
impressed. It's a good work for HTML, but as far as applications distributed
by a web server it isn't especially innovative. But we should keep working on
HTHML/JS/CSS as it will get better.

~~~
daleharvey
because its the distribution that is innovative, its nice being able to draw
text and images and move them around and stuff but that doesnt quite fall
under my definition of innovative, for html and flash

the features of html/css/javascript are not impressive, the fact that you can
build increasingly complex application that will work on a common runtime
installed on every pc and most people tablets and phones without (barely)any
packaging or installation procedures is a modern day miracle

~~~
kenjackson
_the fact that you can build increasingly complex application that will work
on a common runtime installed on every pc and most people tablets and phones
without (barely)any packaging or installation procedures is a modern day
miracle_

This requires me to install a whole browser! For some reason the HN crowd sees
installing FF4 as free. Installing a plug-in as nearly the equivalent to jail
time, a horrendous chore.

With all due respect to all the excitement in mobile (where Flash is
nonexistent), HTML5 fundamentally won't change the desktop at all. And
certainly looking at an application that I've seen high school students do in
Flash is simply not exciting. I salute HTML for finally getting there, but its
just not fundamentally very interesting.

~~~
bzbarsky
> Installing a plug-in as nearly the equivalent to jail > time, a horrendous
> chore.

That's because that's what it generally has been, in the case of Flash. You
may want to read [http://blog.zpao.com/post/538816688/how-to-install-flash-
on-...](http://blog.zpao.com/post/538816688/how-to-install-flash-on-windows-
or-a-cleveland-steamer) if you haven't had that particular "pleasure"...

