March 18, 2024

12 Fun & Clever Examples of HTML5

Last week, the future of the web got a logo.  Just another reminder that, love it or hate it, HTML5 is here to stay and it IS the new standard.  We’ve done some cool round-ups on here before that give several great examples of new sites made with HTML5.  Instead of a repeat performance I thought I’d hunt down a few examples that are a bit out there on the edges, showing off some of the cool new things you can do with HTML5.  A few of them have been around for a while but I’ve made sure to include a few new ones too.  And some that, though subtle, show a keen use of design given some new native abilities.

HTML5 Logo

I hope you enjoy the inspiration. The web is waiting for you to make it awesome!

The Wilderness Downtown by Google & The Arcade Fire

Ever wanted your life to be featured in one of your favorite band’s music videos?  Thanks to HTML5, that experience is not only possible, but it’s native to your browser.  Head on over to The Wilderness Downtown and type in the address of the home you grew up in.  Then, watch as Google Maps and Chris Milk (the video’s director) take you on an impressive journey through your past with a soundtrack by The Arcade Fire.

The Wilderness Downtown

Jolicloud

This slick little OS is Linux based and makes no bones about cutting out everything in your way when it comes to accessing the apps you want – whether they be web or native.

Wordmark.it

Want to see how a word or phrase looks in every font on your computer in a slightly better layout than a drop-down menu?  Well, here it is.  Check it out!

Wordmark.it

Z-Type

Where was this game at when I was in grade school and learning to type?  Seriously, if you can tear yourself away from this game before “wave 10” then you are a stronger person than I.  Z-type uses HTML5 Canvas, Audio, Javascript, and a space invaders/asteroids theme to incentivize typing quickly and correctly.  Go ahead, give it a go!

Ztype game

Nike Better World

Who says something has to be flashy (pun intended) and in your face to be siiiiick?  Not Nike, because this beautifully subtle site shows how HTML5 can bring native beauty to a whole new level.  Head on over and give it a scroll.

Nike Better World

Klowdz

The newest and arguably best way to prove what you see when you look at the sky is to draw it on this HTML5 canvas created by the folks over at Klowdz.  You can even buy prints of your own work!  They’re also saying that soon they will create a “battle” section where you can face off against your friends in endless contests of who is the most right-brained.

Klowdz

Canvas Cycle

Another cool Chrome Experiment, Canvas Cycle is like having an editing panel on your super nintendo.  You can pick from a number of different 8-bit scenes and control the audio, zoom, cycle speed (on the water/audio), cycle type, and of course – the color.

GraphyCalc

This is an HTML5 built 3d calculator that actually allows you to explore a 3d function by rotating the graph with your mouse.  What else is there to say?  Give it a whirl!

Google Maps + Dynamic Canvas

This mashup has me geeking out more than all of the other examples.  Why?  Because Google Maps provides an API that allows you to create custom overlays using HTML5 Canvas.  The most exciting part about this example is that the possibilities I can image are seemingly infinite and useful.  This particular overlay shows how many bicycles are available for hire at London Cycle hire stations via data provided by the Boris Bikes API.

Darkroom

This web app allows  you to pull up pictures from various web services like flickr and edit/save them using some basic but powerful editing tools.

20 Things

As part of their ongoing support campaign for HTML5, Google made this nifty ebook called “20 Things I Learned About Browsers & The Web” using – you guessed it – HTML5.  It’s a clean site, er, book, with smooth animations and a very handy table of contents page/dock.

Agent 8-Ball

I don’t play games online a whole lot, but this one scores points for a nice design and flash free implementation.  Isn’t it nice to know that when you do want to play a compulsory game every now and then that the flash plug-in your running won’t crash your browser?

Bonus!

Apple launched the HTML5 version of their site!

Sources

www.html5gallery.com

www.chromeexperiments.com

Share

Hi my name is Nathan Weller. I'm an avid blogger and the Founder & CEO of Black Cat Digital Publishing LLC. I have a fierce passion for content creation of all mediums and across multiple platforms from the big screen all the way down to your cell phone. If you're passionate about art or an artist yourself, I'd love to connect and learn about what you do :)

12 Comments

    1. mark Reply

      Yup, no semantic tags at all. Just a change in the DOCTYPE, glossy nav backgrounds and animated drop in (the nav drops down in Safari, anyway; not sure about Chrome or Opera).

  1. Dheeraj Reply

    Well, I was thinking about, What creative I can do in my web projects.
    This website really set my mind to think that way.
    Thanks for sharing some of the best creative examples of HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *