23 de jul. de 2012

Trabalhando com Sombras: Text-Shadow

O Text-shadow como o próprio nome diz é a sombra em textos, ele serve para destacar uma parte do texto a qual se queira dar maior relevância, segue o exemplo:

Text-Shadow


Como Utilizar - Aplicando ao CSS:
text-shadow: valor1 valor2 valor3 #cor;
* Adicione pixels ao valores acima: exemplo 0px ou 1px em diante;
  1. valor1: é o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo);
  2. valor2: é o deslocamento da sombra para baixo (valor positivo) ou para cima (valor negativo);
  3. valor3: é o raio para um efeito blur na sombra;
  4. cor: é a cor da sombra.
Os valores de valor3 e de cor são opcionais.
Omitir a valor3 significa que não haverá um efeito blur na sombra.
Omitir a cor significa que a sombra terá a mesma cor definida para o texto.
Os valores de valor1 e valor2 são obrigatórios.
O valor da cor pode ser declarado depois das medidas como mostrado no exemplo anterior ou antes das medidas, indiferentemente.

Você pode acrescentar mais de um text-shadow ao mesmo css e criar efeitos:



Text-Shadow


text-shadow: 30px -30px blue, 20px -20px orange, 10px -10px gray;

Inserindo Text-Shadow em Postagens:
<span style="color: red; font-size: 14px; text-shadow: 0px 3px 2px #000;">SEU TEXTO AQUI</span>
*Edite os campos em Negrito;

* Postagem baseada no site do Maujor