I’ve been playing with [Javascript thanks to Codecademy](http://www.codecademy.com/tracks/javascript) (at the moment, working on if/else statements and for loops). And now [CSS3 transitions](http://html5css3box.com/transitions/) have caught my eye. Surfing around, there are **a lot of beautiful designs I’d like to learn how to do.**
Some examples:
* [Windows of New York](http://www.windowsofnewyork.com/#top)
* [Thrive Solo](http://www.thrivesolo.com/)
* [Polaroids](http://zurb.com/playground/css3-polaroids)
There’s also **[this clock](http://www.paulrhayes.com/experiments/clock/#clock), which is animated just by CSS transitions and rotations.** The author also does a great job of [explaining how to make it](http://www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css/).
With that inspiration, plus a cool-looking site called [Mulenog](http://www.mulenog.com/), **I thought I’d mash up the clock and the moonscape into a space countdown.**
After spending way more time than I’d like to admit, I hacked something together in jsbin. In the process of adapting the CSS clock, I found this [helpful countdown code on Github](http://sanographix.github.io/css3-countdown/) to replace the analogue clock. I also obviously took a lot of elements from the pretty Mulenog to understand how they work.
So, here’s [the space mashup](http://jsbin.com/ucekig/1)! It’s not completely laid out properly for smaller screens, but maybe that’s next. See [full screen](http://jsbin.com/ucekig/1). :-)
I’ve been playing with [Javascript thanks to Codecademy](http://www.codecademy.com/tracks/javascript) (at the moment, working on if/else statements and for loops). And now [CSS3 transitions](http://html5css3box.com/transitions/) have caught my eye. Surfing around, there are **a lot of beautiful designs I’d like to learn how to do.**
Some examples:
* [Windows of New York](http://www.windowsofnewyork.com/#top)
* [Thrive Solo](http://www.thrivesolo.com/)
* [Polaroids](http://zurb.com/playground/css3-polaroids)
There’s also **[this clock](http://www.paulrhayes.com/experiments/clock/#clock), which is animated just by CSS transitions and rotations.** The author also does a great job of [explaining how to make it](http://www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css/).
With that inspiration, plus a cool-looking site called [Mulenog](http://www.mulenog.com/), **I thought I’d mash up the clock and the moonscape into a space countdown.**
After spending way more time than I’d like to admit, I hacked something together in jsbin. In the process of adapting the CSS clock, I found this [helpful countdown code on Github](http://sanographix.github.io/css3-countdown/) to replace the analogue clock. I also obviously took a lot of elements from the pretty Mulenog to understand how they work.
So, here’s [the space mashup](http://jsbin.com/ucekig/1)! It’s not completely laid out properly for smaller screens, but maybe that’s next. See [full screen](http://jsbin.com/ucekig/1). :-)