Text Shadow e Box Shadow CSS

Antes do lançamento das CSS3, caso algu�m desejasse obter o efeito de sombreamento em um texto ou outro elemento de uma p�gina web, precisaria recorrer ao uso de imagens previamente preparadas com essa caracter�stica. Por�m, com a vers�o mais recente das CSS temos � disposiç�o as propriedades text-shadow e box-shadow, que permitem aplicar sombras a textos e blocos.

Sintaxe

Ambas as propriedades, text-shadow e box-shadow, podem ser configurados de tr�s formas diferentes, dependendo da necessidade, conforme vemos na Listagem 1.


01 text-shadow: X Y;
02 box-shadow: X Y;
03 
04 text-shadow: X Y Blur;
05 box-shadow: X Y Blur;
06 
07 text-shadow: X Y Blur Cor;
08 box-shadow: X Y Blur Cor;

Listagem 1. Sintaxe das propriedades text-shadow e box-shadow

Linhas 1 e 2: Ao usar as propriedades dessa forma, os valores X e Y representam, respectivamente, o deslocamento da sombra para a direita em relaç�o � lateral esquerda, e para baixo em relaç�o ao topo do elemento. Valores negativos, neste caso, fazem com que a sombra seja deslocada para a esquerda, ou para cima.

Linhas 4 e 5: Nessa segunda forma, podemos definir um valor para o efeito de blur (borr�o ou desfoque). Quanto maior esse valor, mais borrada/espalhada ser� a sombra.

Linhas 7 e 8: Al�m das coordenadas e do blur, podemos ainda definir a cor da sombra. Caso n�o se deseje aplicar o efeito blur, pode-se simplesmente omitir esse par�metro e informar apenas a cor.

Exemplo: Box-shadow

Na Listagem 2 temos tr�s exemplos de uso da propriedade box-shadow, explorando as diferentes formas de configuraç�o vistas anteriormente.


01 <!DOCTYPE html>
02 <html>
03 <head>
04     <style>
05         div { width: 100px;
06               height: 100px;
07               border:1px solid black;
08               float: left;
09               margin-right: 100px; }
10         #box1 { box-shadow: 20px 20px }
11         #box2 { box-shadow: 20px 20px 10px }
12         #box3 { box-shadow: 20px 20px 10px blue }
13     </style>
14 </head>
15 <body>
16     <div id="box1"></div>
17     <div id="box2"></div>
18     <div id="box3"></div>
19 </body>
20 </html>

Listagem 2. Exemplo de uso da propriedade box-shadow

Run

Linhas 5 a 9: aplicamos uma configuraç�o b�sica �s tr�s divs, apenas para deix�-las vis�veis lado a lado e facilitar sua observaç�o;

Linhas 10 a 12: configuramos a sombra das divs de tr�s formas distintas.

O resultado � o que vemos na Figura 1.

Figura 1. Exemplos de uso da propriedade box-shadow

Exemplo: Text-shadow

A seguir, na Listagem 3, temos os exemplos de uso da propriedade text-shadow, seguindo a mesma l�gica do exemplo anterior.


01 <!DOCTYPE html>
02 <html>
03 <head>
04     <style>
05         #titulo1 { text-shadow: 10px 10px; }
06         #titulo2 { text-shadow: 10px 10px 5px; }
07         #titulo3 { text-shadow: 10px 10px 5px blue; }
08     </style>
09 </head>
10 <body>
11     <h1 id="titulo1">T�tulo 1</h1>
12     <h1 id="titulo2">T�tulo 2</h1>
13     <h1 id="titulo3">T�tulo 3</h1>
14 </body>
15 </html>

Listagem 3. Exemplo de uso da propriedade text-shadow

Run

O resultado agora � o que vemos na Figura 2.

Figura 2. Exemplos de uso da propriedade text-shadow

Observe que no primeiro caso o resultado final n�o parece muito eficiente, pois a sombra possui a mesma cor do texto e n�o est� borrada, atrapalhando assim a visualizaç�o de ambos.

Funcionamento

Para compreender o funcionamento das propriedades text-shadow e box-shadow, podemos tomar como base a Figura 3. Nela, � importante observar que o eixo X (horizontal) � crescente para a direita, enquanto o eixo Y (vertical) � crescente para baixo. Esse comportamento � um pouco diferente do Plano Cartesiano convencional, em que o eixo Y cresce para cima, mas a l�gica de funcionamento � a mesma.

A origem, nesse caso, � a extremidade superior esquerda do elemento (ret�ngulo vermelho).

Figura 3. Sistema de eixos e posicionamento do elemento na p�gina

Ao atribuir valores para as posiç�es horizontal e vertical da sombra, teremos um novo elemento, igual ao original em dimens�es e forma, por�m completamente preenchido com a cor que definirmos (preto por padr�o). Esse elemento, que estava originalmente posicionado no mesmo local do original (mas atr�s dele), ser� ent�o deslocado para a direita e para baixo (ou para a esquerda e para cima, caso se utilize valores negativos).

Observe, na Figura 4, como seria gerada a sombra do ret�ngulo vermelho da figura anterior, tendo sido aplicado um deslocamento de 20px nas duas direç�es.

Figura 4. Deslocamento da sombra

Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)

CSS: text-shadow e box-shadow

Nesta documentação você aprenderá a aplicar o efeito de sombra a textos e outros elementos utilizando as propriedades text-shadow e box-shadow do CSS3.

Sintaxe

Exemplo: Box-shadow

Exemplo: Text-shadow

Funcionamento

Artigos relacionados