O atributo text-shadow de CSS serve para criar sombras no texto, mas realmente com um pouco de prática e imaginação pode dar suporte a muitos outros efeitos interessantes. Neste artigo explicaremos essa regra de estilos e daremos exemplos variados para demonstrar sua versatilidade.

Antes de começar quero esclarecer que, apesar de haver posto o artigo dentro do Manual de CSS3, a regra de estilos text-shadow não pertence a CSS3 mas já foi introduzida no nível 2 das Folhas de Estilo em Cascata. No entanto, até agora não se havia implementado dentro dos navegadores mais comuns, por isso a estamos agrupando como novidade dentro deste Manual de CSS3.

Uma vez comentado esse detalhe sobre as sombras no texto, com CSS e sem utilizar um programa de desenho gráfico, em breves instantes comprovaremos o fácil que é criá-las. Vamos começar vendo um exemplo de declaração com text-shadow.

Sombra sólida

h1{
   text-shadow: 1px 2px #999;
}

Assim estamos modificando os cabeçalhos de nível 1 para que tenham uma sombra sólida de cor cinza. Os valores que estamos indicando na sombra são:

• Deslocamento da sombra à direita (1px).
• Deslocamento da sombra para baixo (2px).
• Cor da sombra (#999).

Sombra desfocada

A sombra sólida está bem, mas em muitos casos vamos desejar fazer um efeito de desfocado da sombra, que é muito mais realista e frequentemente mais atrativo visualmente. Para tanto podemos definir um valor adicional, que é o tamanho do esfumaçado.

h2{
   text-shadow: 3px 3px 2px #696;
   color: #666;
}

Aqui definimos uma sombra com 3px de deslocamento para baixo e à direita e 2px de esfumaçado ou desfoque. Ademais, a sombra é de cor esverdeada. Também se definiu a cor do texto, com o atributo "color", mas isso não tem nada a ver com a sombra.

Colocar varias sombras em um mesmo elemento

Podemos definir varias sombras diferentes sobre um mesmo elemento da página, com o qual se podem obter efeitos variados e alguns deles bastante chamativos. Para tanto, se podem colocar as sombras desejadas separadas por vírgulas.

h3{
   text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9;
   color: #999;
}

Isto não tem nenhum mistério. Simplesmente se vão colocando todas as sombras que definamos, mas terá que se ter um pouco de critério para fazer efeitos que valham a pena.

Efeitos diversos com sombras CSS

O atributo text-shadow é um excelente recurso para fazer distintos tipos de efeitos gráficos que resultam visualmente atrativos, ainda mais levando em conta que são feitas com texto simples e atribuindo unicamente algumas regras de estilo. A continuação, veremos vários exemplos que podemos anotar como inspiração, mas a gama de possibilidades vai muito mais além.

Sombra "Giga":
Podemos utilizar várias sombras sólidas para gerar uma supersombra para nosso texto.

h2.sombragiga{
   text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
   color: #060;
   letter-spacing: 1px;
}

Efeito de fogo:
Se usamos várias sombras de cores alaranjadas podemos conseguir um efeito de fogo. Fica por nossa conta fazer um pouco de teste e ensaio para conseguir um resultado realista, porém se pode conseguir algo interessante.

h2.fogo{
   text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
   color: #666;
}

Contornar o texto com um traço:
Com quatro sombras sólidas a um pixel de distancia do texto, situadas nos quatro lados, podemos conseguir um efeito de traço ao redor do texto.

h2.contornar{
   text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
   color: #fff;
}

Texto em relevo:
Com uma sombra escura e outra clara podemos conseguir um efeito de relevo sobre o texto. Pode ser um relevo ou um baixo relevo, dependendo de onde coloquemos ambas sombras.

h2.relevo {
   text-shadow: 1px 1px white, -1px -1px #333;
   background-color: #ddd;
   color: #ddd;
   padding: 10px;
}

Efeito Pixelart:
Com um pouco mais de imaginação podemos conseguir efeitos os mais diversos. Neste caso, fizemos um teste que dá um resultado de desenho "pixelart", daqueles gráficos criados pixel a pixel dos jogos de antigamente.

h1.pixelart{
   text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
   color: #ccc;
}

Todos os estilos de sombras oferecidos neste artigo podem ser vistos em uma página à parte.

Conclusão sobre text-shadow

Resumindo, as sombras CSS que conseguimos com text-shadow nos oferecem uma nova via muito rápida e criativa para dar alguns toques de desenho em nossos websites, sem ter que recorrer a Photoshop, ou a outro programa de desenho, como ocorria anteriormente.

Se buscamos artigos antigos dentro de CriarWeb.com veremos que são oferecidas diversas oficinas para criar sombras em textos e em alguns casos se oferecem técnicas CSS para emular as sombras quando não existia o atributo text-shadow. Todas as possibilidades anteriores necessitavam um trabalho minucioso e a colaboração de outras técnicas ou programas como editores gráficos.

Outra das vantagens de usar CSS é que, se amanhã desejarmos mudar qualquer coisa, como o tamanho do texto, o efeito da sombra ou simplesmente a cor da web e com isso a cor das sombras para que casem com a nova cromática, só temos que editar nossa declaração de estilos.