This is a simple layout I've designed and coded to support my CSS3 and HTML5 testing. Although I am a cross-browser compliant coder (yes, I can even do IE6), the CSS3 examples below only work in Mozilla and Webkit-based browsers (FireFox, Chrome, Safari).
CSS3 Used
Border-Radius:
Very much looking forward to the days of no more extra <div>s or image tricks to achieve rounded corners.
...to toggle the 10px border radius on and off for this <div>.
Text-Shadow:
Supported without forking, but not supported in IE yet.
...to toggle text-shadow on and off within this <div>.
Box-Shadow:
...also reminds me of border-radius where images and extra <div>s are used to create a drop or box shadow effect on a <div>.
...to toggle a box shadow on and off for this <div>.
Linear-Gradient:
This is an interesting one, as you put your code within the background or background-image properties.
...to toggle the site background gradient on and off.
Opacity:
OK, so we can use this one with IE too using "alpha". Like text-shadow, it can be used without forking in supported browsers.
...to toggle this <div>'s background opacity on and off.
HTML5 Used
<nav> | Should benefit SEO, accessibility, mobile...
Haven't been able to find definitive guidance with using this multiple times per page (re: footer navigation, etc.)
<header> , <hgroup> | To be used in conjunction with <article> , <footer> , etc.
Should benefit SEO, accessibility, mobile...
<footer> | For site-wide copyright, privacy, secondary links. Should benefit SEO, accessibility, mobile...
<article> | The main area for your unique page content aside from navigation, headers, footers, etc.
Not sure if this is to be used only for editorial, blogs, etc. or if it can benefit normal page structure for SEO, etc.
<time> | Used for tagging date and/or date & time within the document. Should be easier for applications to pick out this information as non-string.
<audio> | No Flash or JavaScript plug-ins required (although in FireFox, the player uses JS).
Sample below... and please enjoy my drum solo.
NOTE: I've been having mixed results on Safari with <audio>.
Great CSS3 & HTML5 references
• Microsoft: CSS2/3 feature support table
• Quackit.com's HTML5 tag listing
• eCSStender -- still buggy with Safari, but a great plug-in effort to minimize forking
