Pular para o conteúdo principal

Sombras com CSS


Os modulos de CSS3 trazem muitas novidades. Continuando a série de artigos sobre ele, eu falo hoje sobre duas funcionalidades chamadas box-shadow e text-shadow que respectivamente servem para aplicar sombras no fundo de elementos e sombra nos textos.
Veja os exemplos:
#DIV com box-shadow
#DIV com text-shadow
Veja o código de box-shadow:
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
e o de text-shadow:
text-shadow: 2px 2px 2px #000;
Os valores destacados em vermelho e verde definem respectivamente a posição horizontal e vertical da sombra em relação ao elemento, as partes em azul definem a espessura da sombra e em roxo, a sua cor.
Esse código deve ser colocado na parte do CSS do seu site/blog. Mais comum entre as tags <style> e </style>. Ficou alguma dúvida? Deixe um comentário.
Até a próxima!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

Cadastre-se no Technorati.

Eu começo agora uma série de tutoriais para você poder aproveitar mais algumas das mais conhecidas redes sociais, a começar pelo Technorati. Você poderá adicionar widgets em seus blogs, aprender mais sobre redes sociais e etc.