After seeing neography.com's CSS3 transition galaxy I couldn't help but rewrite it using javascript so that it would work in browsers other than Chrome or Safari. Eventually Firefox (maybe IE?!) will support CSS3 transitions and animations as well, but for now, we need a javascript implementation.
I still have work to do on the satellites (moons, rings, etc) so it's a work in progress for now.
After the disaster I mentioned in the last article, I figured the least I could do, for now, is redo some of the CSS3 examples, and get them completed. Over the next week or so, I plan to get all of them up and completed. For now the following have been updated:
nth-child() selector.Enjoy! More coming as often as I can muster!
We've all seen the sticky notes on websites used for notices, call to actions, and normal UI type information. Usually these sticky notes are composed of images, and maybe even a simple CSS3 rotate transform. But we can achieve a quite similar looking sticky note sans images all together.
It took quite a bit of playing around with transform and gradients, and it doesn't quite look as good as it could, but I believe I've come up with something that could easily be incorporated into a Mootools or JQuery class to generate just such an effect on the fly. Lets have a look, shall we?
Read more