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.
For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path.
The tool allows you to attach any text to an arbitrary bezier path or a circle. Click “Generate HTML” to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.
CSS3 gallery using tabindex=”-1″ and the :focus pseudo selector to trigger the animation. The benefit of this method over those using fragment identifiers is that users won’t have to hit the back button through each clicked image. And you’re URL stays nice and clean.
Safari and Chrome users get a nice image reflection on the thumbnails.
In this article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute.
For the browsers that don’t support this new HTML attribute, fallback is created using Modernizr’s feature detection.
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.
Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table. In fact, my favorite screensaver does a pretty good job of emulating this — it’s the one built into MacOS X that grabs photos from your iPhoto library, and scatters them gradually all over the screen in a nice, messy pile.
Could we achieve this with CSS3 alone? I bet you’re already thinking of ways to make that work. Unfortunately, the versions of Firefox and IE that will support them are still in beta — and even when they do come out, we all know how long it takes the world to upgrade their browsers. For now, let’s look at a hybrid approach…