Efeitos CSS3 Border Radius e Box Shadow

Eu criei um vídeo tutorial há pouco para mostrar alguns exemplos dos efeitos CSS3 Border Radius e Box Shadow, além de como implementar um código muito simples.

Dê uma olhada no vídeo aqui = http://www.youtube.com/watch?v=4qibiNinF1E

O código é muito fácil de usar, por exemplo, usando border-radius :

div.border {
border
:1px solid #000;
border
-radius:5px;
}
/*This will add a 5px curved border to all corners*/

Para garantir que o efeito seja captado por todos os navegadores compatíveis, os únicos problemas com o IE (surpresa, surpresa! – o IE9 funcionará bem)

div.border {
border
:1px solid #000;
border
-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/*So I've used browser specific css tags but you could just use them in separate stylesheets if that how you'd prefer. */

Lembre-se de que você precisa usar a borda padrão do CSS : 1px solid # 000; bem como raio de borda: 5px; etc para que o efeito funcione.

Confira o vídeo para uma demonstração do código da sombra da caixa

Aproveitar 🙂