Lately the hype around HTML 5 and CSS3 has been getting out of hand.  It is a pet peeve of mine when people claim that some of the amazing work done online is “built using HTML 5″ when in fact it is about 10% HTML 5 and 10% CSS 3 while most of the “cool factor” actually comes from well-written JavaScript.

That being said, I too have dived into using some HTML 5 and CSS3 whenever I can, if only to learn some of the new techniques.

It is incredible what can be accomplished with just CSS3, in terms of styling.  Take a look at the control panel I styled below:

Something like this would sometimes take hours of Photoshop work to execute.  With CSS 3 though, all the effects are created using CSS properties with the exception of the icons, which are stock icons.  The combination of text-shadows, box-shadows, border-radiuses, borders, transitions and gradients can make an unordered list of hyperlinks look like a proper dashboard.

The only true drawback is browser compatibility, however.  This is not as big an issue as it would seem, because if the web page is built to degrade gracefully, then low-tech browser users will see a fully useable, scaled-back rendering of the same page.

It is important to write all of the browser-specific properties and also include the “official” version of the CSS property at hand to make it work.  To make it easier, there are lots of online tools to help.  The most notable one is called CSS 3 Please which is a JS based page that generates all the required rules for you.   This was a great find and thanks to Tom Auger for sharing it.

I will be writing some tips about switching to HTML 5 in a future post, as this new markup makes even tedious content organization fairly entertaining; if only because of its novelty.