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.
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!!
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.
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.
A great tutorial that details how to get your form design from Photoshop to HTML.
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.
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.
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.
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.
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.
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.
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.
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.
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.