10 Geeky Web Tricks with HTML5 and CSS3

It’s a glorious time to be a web geek! Did you see the cool effect the folks at Google added to their logo the day before they made their big announcement about changes to the perennial search engine? It’s gone now, but for a brief period when you moused over the logo, it flew apart in colorful blobs avoiding your mouse.

This article has been reproduced in a new format and may be missing content or contain faulty links. Contact wiredlabs@wired.com to report an issue.

To most people’s surprise (OK, maybe only to mostweb geeks’surprise), this interactivity was not created with Adobe Flash, but instead using the most recent versions of common Web technologies. It’s likely that you’ve already benefited from these new Web technologies: HTML5 and CSS3. They are already popping up all over the place, despite the fact that they are not supported in the most popular browser, Internet Explorer <insert dramatic pause here> at least not until today!

That’s right, the next version of Internet Explorer (version 9) will support HTML5 and CSS3 and that version will be released today (15 September) as a public beta!!

And there was much rejoicing!!!

Our long nightmare is finally over. Now everyone will be using a modern browser and Web designers can finally do really cool things without Flash. Ok, maybe I’m being premature — it’ll take a while before everyone is upgraded — but a guy can dream, can’t he?

The great thing about any ground breaking technology is all of the cool experiments that get thrown together. The early adopters are less worried about finding practical applications and more interested in just playing around to create new toys. Let’s play with a few today!

Below is a list of my favorite 10 new Web toys. Of course you will need a modern browser — Safari 5 or Chrome 6 are usually best, but Firefox 3.6 will work for a lot of them. If you are running Windows — and are very brave person — you should go download Internet Explorer 9 right now and test these toys out. Let me know in the comments if all of them are working for you in your browser of choice:

Pure CSS3 AT-AT

Pure CSS3 AT-AT: This is a simple example of animation created by Anothony Calzadilla without a single line of programing code (no JavaScript, ActionScript, Java, Objective C or whatever). It’s all just styles. OK, so it doesn’t do much but just look like it’s walking, but it’s cool to watch. You can also turn on outlines — the “bones” — to see the different boxes that are being moved.

Keylight

Keylight: Created by Hakim El Hattab, this simple interface allows you to place numerous colored dots within a 3D field that will act as a circuit, each dot playing a different tone. The upshot is that you can make beautiful tonal music with just a few clicks of the mouse. You can move the dots around to change the tones, increase or decrease the speed, but what’s really cool is that as you build your music, the song is recorded in the page URL. Just copy the URL and you can send someone your song. My son spent hours playing around with this one, and then sent me this song.

CSS-Man

CSS3 Man: Another Calzadilla animation based on the classic 1967 Spider-Man cartoon. This one also pokes a bit of fun at Flash.

Sinuous

Sinuious: Another great experiment by Hakim, this is a simple but addictive game of avoiding the dots. It’s kind of like asteroids, but without all of the shooting. You can also pick-up shields along the way, but really, that’s it. Again, my son spent hours playing this one. It’s the refrigerator box of games: the simpler they are, the more fun they are to play with.

Cubespace

Cubescape: Like Lego bricks on the screen! Build with colorful cubes, edit them, move them, and then replay an animation of all of your hard work.

MugTug Darkroom

Darkroom: It may not be ready to replace Photoshop quite yet, but Mugtug’s Darkroom offers an impressive array of photo editing tools in a slick interface: Exposure, Brightness, Contrast, Saturation, Tint/Temperature, Levels, Color Blindness Simulation, Red-eye Filter, Rotate, Mirror, and Crop. This all delivered from on online app that still allows you to edit images directly from your hard-drive.

Apple Gallery Demo

Apple Gallery Demo: Apple computer shows off some of its neat tricks with this photo browser that really gives you a a real feeling of space. You can have images rotate across the page or through 3D space.

Arcade Fire: The Wilderness Downtown

Arcade Fire: The Wilderness Downtown: This little experiment in web design and video has already been widely reported, but really has to be added to any list of geeky web tricks. You type the address of where you grew up and it creates an online video experience using HTML5, CSS3 and Google Maps with your childhood memories as the star of the show. It could come off as a little cheesy, but the combination of the song “We Used to Wait” by Arcade Fire and the fluid animations makes it somehow very peaceful.

Water Type

Water Type: This is a simple, but cool effect: As you type in a message, it animates the text as if it is being created out of water.

Destructive Video

Destructive Video: As you watch the video of the bunny shooting arrows, click on it, and it fragments into pieces while still playing. Wait a few seconds and the video will reintegrate itself.

If you haven’t had enough, then here are a few great lists of more Web geeky goodness: