Showcase of HTML5 and CSS3 for March 2011

11 Mar

Spring has sprung and the days are starting to get little longer so you know what that means? Another list of some truly awe inspiring showcases for HTML5 and CSS3!

As always let us know what you think in the comments below and if you would like to be considered for inclusion in next month’s list feel free to submit your link to¬†hello[at]stuff4designers[dot]com.

Firefox lighting demo

If you’ve downloaded the latest version of FireFox4 RC1 then you can enjoy this stunning demo of lighting effects they’re creating using HTML5 and CSS3. My jaw still hurts from hitting the floor!!

CSS3 ribbon generator

This is a very handy site for creating simple 3D ribbon effects for your div tags without the hassle or starting from scratch yourself! Not exactly full to the brim with options just yet but hopefully more styles will be added later on.

CSS3 progress bars

Progress bars. There’s just no getting away from them, especially if you’re making an enterprise web app. To help you out we’ve included this rather delicious tutorial that uses no images to create very nice CSS3 progress bars.

Create a HTML5 and CSS3 contact form

A great tutorial that details how to get your form design from Photoshop to HTML.

HTML5 Boilerplate release candidate 1 is out

If you haven’t heard about the HTML5 Boilerplate by now, where have you been?! This is a fantastic template for getting your next project up and running using HTML5 within 2 mins – literally! Check. This. Out.

Create amazing CSS3 boxes without any images

I was blown away by these CSS3 boxes when I first looked at them. “There must be images used to create these effects”, I thought. There isn’t. I *think* it’s magic but I’m not 100% sure.

Amazing full functional CSS3 Mac keyboard demo

I love finding these little demos out there on the web. This particular demo lets you type into a form field above the keyboard and as you type the letters the keyboard underneath highlights the keys your pressing. It all uses CSS3 to make it sparkle. Regular typing is boring after seeing this.

Great performance tips for speeding up your HTML5 application

Not exactly a showcase of HTML5 as such but this article contains some great tips and tricks on how to get the most out of your HTML5 web applications. It is a bit heavy on the technical side but it’s worth the read if only to realise how resource intensive that CSS3 and HTML5 canvas 3D shooter you’re working on is going to be.

HTML5 cheatsheet

It seems like HTML5 is changing every 30mins these days. Trying to keep up can be overwhelming at times. If only there was some sort of cheat sheet you could reference to quickly keep up with all the progress. Don’t worry any longer. Stuff4Designers has your back. Check out this HTML5 cheat sheet and amaze people around you with your little nuggets of wisdom.

Fantastic HTML5 tutorials over on HTML5rocks.com

HTML5Rocks.com is a really good site for reading up on all the different options within the HTML5 spec. Want to learn how to make offline apps? How about the storage limitations in HTML5 browsers? This site has it all and more. Bookmark it now. I guarantee you’ll come back to this site again and again.

HTML5 canvas tutorials for all levels

Another great tutorial site that is setup to teach you all about Canvas and how to use it to draw animations. It starts off basic but ramps up the animations pretty quickly. Everything is explained well and articles are added quite frequently. If you’re itching to get into HTML5 canvas animations it’s worth a read.

Using HTML5 to play a game using only your browser address bar!

Minimalist gaming is all the rage at the moment and they don’t come more minimalist that this! This ‘game’ takes place entirely in your browsers URL bar. If you have five minutes give it a go.

Canvas 2D vs WebGL fish tank demo

WebGL gives HTML5 canvas a great run for it’s money in this article. It turns out that for thousands of sprites canvas can’t keep up compared to WebGL. It’s interesting to see what works and what doesn’t for all types of technology. HTML5 is no different. This is worth a read if you’re planning on doing anything with loads of sprites in your canvas game.

Richard Reddy is the Technical Director with Dragnet Systems Limited. He has a keen eye for design and loves spending time researching new and interesting interface improvements using jQuery, HTML 5 and CSS3. Follow him on twitter or read his blog if you'd like to stalk him more.

One Response to “Showcase of HTML5 and CSS3 for March 2011”

  1. Mike April 2, 2011 at 8:25 am #

    Even more resources:

    http://html5-showcase.com/
    http://html5gallery.com/
    http://www.html5mania.com/