Flávia fala sobre o novo logo do html5 e apresenta a criação de um menu com efeitos de sombreamento e uma galeria de imagens com efeitos no houver só com CSS e Html.

1. Vamos falar de

2. Novo logo do Html

3. Sem identidade....

4. Código HTML

6. Barra de navegação

7. Código CSS
#menu{
position: relative;
display: block;
margin: 20px auto;
width: 600px;
height: 60px;
padding: 0 20px;
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125)));
-webkit-box-shadow:#000 0 1px 2px;
-webkit-border-radius:2px;
}

8. Navegação dos botões

9. ul li{
list-style-type: none;
margin: 15px 0;
foat: left;
height: 30px;
line-height: 30px;
}
ul li a{
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb
(40,40,40)), color-stop(0.5, rgb(80,80,80)) );
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #666;
border-top: 1px solid #222;
border-left: 1px solid #666;
border-right: 1px solid #222;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
}

10. ul li:frst-child a{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-left-radius:20px;
}
ul li:last-child a{
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
}
ul li a:hover{
text-shadow: #f5fc39 0 0 10px;
background: #222;
}

11. Efeito nas imagens

12. #fickr_badge_uber_wrapper{
width: 550px;
position: relative;
display: block;
margin: 0 auto;
margin-top: 100px;
}
.fickr_badge_image{
foat: left;
}
.fickr_badge_image img{
margin: 10px;
border: 3px solid #fff;
display: block;
position: relative;
-webkit-border-radius:5px;
-webkit-box-shadow: #000 0 0 2px;
-webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in;
}
.fickr_badge_image img:hover{
-webkit-transform:scale(1.2);
z-index: 10;
-webkit-box-shadow: #666 0 5px 10px;
}

15. Referências