Como verán a trabes de muchos temas que rondan en la Web estamos en la era Html5 y CSS3.
Unos de los proyectos muy buenos que he encontrado recorriendo la Web es html5snippets.com.
Este proyecto te permite compartir fragmentos de HTML5. Se trata de un pequeño proyecto experimental creado por Roberto Brevé.
En el aprenderás muchos trucos que te serán de utilidad al momento de programar tu proyecto basado en Html5 y CSS3.
Les dejo una muestra de código, y esperamos que les sea de utilidad.

<!doctype html>
<!-- simplified doctype works for all previous versions of HTML as well -->
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Glowing Tabs</title>
<style>
html, body, div, span, applet, object, iframe, code, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-family: inherit;
    text-align: left;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul {
    list-style: none;
}
q:before, q:after, blockquote:before, blockquote:after {
    content: "";
}
h1 {
    color: #fff;
    text-align: center;
    padding: 80px 0 30px 0;
}
h2 {
    text-align: center;
    padding: 40px 0 0 0;
    width: 75%;
    margin: 0 auto;
}
body {
    background: #131925;
}
ol {
    list-style: decimal;
    font-size: 24px;
    width: 400px;
    padding: 30px 0 0 60px;
    margin: 0 auto;
}
ul#navigation {
    height: 36px;
    padding: 20px 20px 0 30px;
    width: 904px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
ul#navigation li {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    float: left;
    width: 110px;
    margin: 0 10px 0 0;
    background-color: #2B477D;
    border: solid 1px #415F9D;
    position: relative;
    z-index: 1;
}
ul#navigation li.selected {
    z-index: 3;
}
ul#navigation li.shadow {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -3px;
    left: 0;
    border: none;
    background: none;
    z-index: 2;
    -webkit-box-shadow: #111 0 -2px 6px;
    -moz-box-shadow: #111 0 -2px 6px;
    box-shadow: #111 0 -2px 6px;
}
ul#navigation li a:link, ul#navigation li a:visited {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: block;
    text-align: center;
    width: 110px;
    height: 40px;
    line-height: 36px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #2B477D;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
}
ul#navigation li a:hover {
    background-color: #5a87dd;
}
ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
    color: #2B477D;
    border: solid 1px #fff;
    -webkit-transition: background-color 0.2s linear;
    background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #f2f2f2), color-stop(.8, #d1d1d1));
    background-color: #f2f2f2;
}
#content {
    width: 850px;
    background: #f2f2f2;
    padding: 0 0 50px 0;
    margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div style="width: 850px; margin: 0 auto 0 auto;">
<h1>CSS3 Glow Tabs with Box Shadow</h1>
<ul id="navigation">
    <li class="one"><a href="#">Details</a></li>
    <li class="two"><a href="#">Schedule</a></li>
    <li class="three selected"><a href="#">Speakers</a></li>
    <li class="four"><a href="#">Sponsors</a></li>
    <li class="five"><a href="#">Register</a></li>
    <li class="shadow"></li>
</ul>
    <div id="content">
    <h2>The tabs in this demo are image-less tabs<br />with 4 different CSS3 enhancements:</h2>
    
    <ol>
        <li>Rounded Corners (border-radius)</li>
        <li>Box Shadow (bottom of inactive tabs)</li>
        <li>Transitions (the glow on hover)</li>
        <li>Gradients (the active tab)</li>
    </ol>
    
    <h2>CSS Transitions work in Chrome, Safari, Opera 10.5 &amp; Firefox 3.7</h2>
    </div>
</div>
<script>
$(document).ready(function(){
    $("ul#navigation li a").click(function() {
        $("ul#navigation li").removeClass("selected");
        $(this).parents().addClass("selected");
        return false;
    });
});
</script>
</body>
</html>