10 HTML5, CSS3 Tricks That Web Geeks Will Love

The web is a huge playground nowadays and the competition is huge. These tricks could give your website an edge.

HTML5 and CSS3 are the two foremost tools for web geeks nowadays. In case you had a doubt about the same then here's how. These 10 web tricks will show you exactly how powerful these two languages can be. Take a look, you might find something useful for your own websites.

1. Pure CSS3 AT-AT: The animation here has been created without any coding. No programming languages have been used for this. It doesn’t do anything special, but you can use such a trick to make your website more attractive.

2. Keylight: This is a nifty trick. What happens here is you click on the background to create small dots and based on the placement of the dot, a tone is played. Multiple dots make a full track. Further, once you’re done, you can share your track. How? Just copy the URL and send it to whoever you want to share it with. Your track is saved in the URL only.

3. CSS3 Man: This is another animation that doesn’t use Flash or any other similar platform.

4. Sinuious: This one is a simple game that can be addictive for kids. You have to avoid hitting the red dots, while picking up power-ups on the way. The more you can avoid, better will be your score.

5. Cubescape: This is all about cubes. Click on the screen to place the cubes wherever you want them. You can choose different colours for the cubes, move them and edit them. When you’re finished, you can watch an animation of what you just did.

6. Darkroom: This is actually one of the more useful tricks in this list. While the others are for fun, Darkroom actually works as a photo editor and comes with a number of editing tools along with an easy interface. You can edit brightness, contrast, exposure, tin/temperature, saturation, colour blindness simulation, red-eye and other aspects of your picture. You can do this to images that are saved on your hard drive.

7. Apple Gallery Demo: From the makers of the iPhone, this is a photo browser that lets you rotate images across the page, through 3D space etc.

8. The Wildnerness Downtown: You have probably already heard of this experiment. This one asks you for your hometown and then creates a video using three things: Google Maps, CSS3 and HTML5.

9. Water Type: This is another nifty trick. It asks you to type in a message and it appears as if it’s being created out of water.

10. Destructive Video: You see a video in this one, but when you click on the video it blows up. Interestingly, the video is still playing. Stop for a few seconds and the video will automatically reintegrate.

Author : Shivam Kotwalia, CodeKill