Showcase of HTML5 and CSS3 for February 2011

1 Feb

Every month Stuff4Designers compiles the best showcases of work from around the web to help inspire and bring out your creative side. Enjoy!

CSS3 only tool tips


This is a great example of using CSS3 to control tool tips without using JavaScript.

CSS3 only toggle switch


Keeping with ‘CSS3 only tricks’ take a look at this toogle switch that uses CSS3 to achieve an effect usually accomplished with JavaScipt. It’s a really nice effect.

Link nudging/movement using CSS3


Yet another pure CSS3 animation that was previously only accomplished using JavaScript and css – as you mouse over the links they animate right. Very easy to setup and adjust for your own website.

HTML5 representation of the New York Subway Schedule


I love this site! It starts off with a single train, represented with a line and within a few seconds you have loads of lines all intersecting with each other. Every time a line goes over another line in its path a little violin plucking noise can be heard. Reminds me of an old screen saver I used have on my PC.

Pure CSS3 accordion


Accordions are a very handy technique used to display a lot of content in a nice bite-sized way to the end user. This particular accordion demo is using CSS3 to achieve the same effect you’re used to having with JavaScript.

Create a billboard style animation using CSS3


A great demo on using CSS3 to create an amazing billboard style for your images. I expect this one to be used on loads of websites this year!

bitka.com

bitka.com by Rebecca Fitzgerald-Smith
Rebecca FitzGerald-Smith has created a stunning new website that uses CCS3 gradients to help create a very creative looking header on her new blog redesign. By using CSS3 gradient, she can change the colour of her site in a few seconds and by targeting the different browsers she can have different headers on her site without making separate images. Very cool!
Disclosure: Rebecca FitzGerald-Smith is a writer for this blog.

3D HTML5 logo using Canvas and javascript


Really cool effect to create a spinning 3D logo.

If you would like to be considered for inclusion in next months list feel free to submit your link to hello[at]stuff4designers[dot]com.

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 February 2011”

  1. Gerard February 14, 2011 at 9:20 am #

    You got to be kidding me , with this we dont actually need lots of JS codes , and deffo sites will load faster , and more over browser friendly :)

    Brilliant share .