Text Shadow - Criando sombras em textos com CSS3


Com a constante mudança da internet e dos padrões do W3C, vamos falar um pouco sobre a nova tendência da web: Criar sombras com CSS3, o "text shadow".
Essa nova propriedade do CSS já estava sendo analisada a muito tempo atrás pelo W3C em sua seção 16.3.2 sobre colocar efeitos de sombra em textos. Já é possível notar sinais de uma movimentação efetiva no sentido de acelerar os estudos para efetivar as CSS3 como uma Recomendação oficial do W3C. É certo que há muito trabalho pela frente, contudo alguns módulos das CSS3, embora ainda em fase de rascunho de trabalho, já começam a ser implementados em alguns navegadores, proporcionando à comunidade um meio de testar as novas propriedades e opinar sobre elas.

Bom, vamos a sintaxe geral desta propriedade:

seletor { 
 text-shadow: medida-1 medida-2 medida-3 cor; 
 } 
Onde:
  1. medida-1: é o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo);
  2. medida-2: é o deslocamento da sombra para baixo (valor positivo) ou para cima (valor negativo);
  3. medida-3: é o raio para um efeito blur na sombra;
  4. cor: é a cor da sombra.
Vamos fazer um exemplo rápido:
Suponhamos q nosso código HTML seja o seguinte:

HTML:
<h1>Construindo sites com CSS e (X)HTML</h1>

CSS:
h1 {
    font-size:30px; 
    color:black; 
    text-shadow: 2px -2px lime; 
    }

o código renderizado ficará da seguinte forma:
 
Construindo sites com CSS e (X)HTML
 
 
Por enquanto, podemos utilizar box-shadow nas versões mais modernas do 
navegador Opera. Por sua parte, navegadores baseados em Mozilla e WebKit 
têm suporte a esta funcionalidade de CSS3, porém, através de uns 
atributos CSS com uma ligeira variação em seu nome.
 
Para o Firefox, por exemplo, temos q escrever o código da seguinte forma:
-moz-box-shadow: 1px 1px 0px #090; 
Nos navegadores webkit, tipo Google Chrome e Safari desta forma:
 
-webkit-box-shadow: 3px 3px 1px #fc8; 
Bom, isso é apenas uma prévia de como podemos utilizar o text-shadow em nossas páginas...
Existem vários exemplos de combinações de sombra e efeitos, é só testar!
seguem os sites que tirei a inspiração para criar este post:
http://www.maujor.com/tutorial/css3-text-shadow.php
http://www.criarweb.com/artigos/sombras-em-css3-com-box-shadow.html
Valeu!!

Um comentário: