iMasters | Por uma internet mais criativa e dinâmica

• CSS
• XHTML

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 7 comentários

As Recomendações do W3C para as CSS2 lançadas em 18 de maio de 1998 em sua seção 16.3.2 já previam a propriedade text-shadow destinada a obter um efeito de sombreamento em textos. Esta funcionalidade não foi implementada em nenhum navegador e aos autores que desejarem o efeito de textos sombreados em seus documentos não resta alternativa outra que não substituir o texto por uma imagem.

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.

Suporte

Os seguintes navegadores oferecem algum suporte para determinadas propriedades CSS3:

• Safari 3
• Konqueror
• iCab
• Opera 9.5b
• Firefox 2

Para suas experiências com CSS3 recomendo baixar o Opera 9.5b em sua versão beta, que está disponível para praticamente todos os sistemas operacionais.

Existe uma versão do navegador Safari3beta para Windows que também oferece bom suporte para algumas propriedades CSS3.

A propriedade text-shadow.

O módulo CSS Text Level 3 do W3C Working Draft de 6 de março 2007 em sua Seção 8.3 estabelece a propriedade text-shadow com as seguintes características:

A sintaxe geral para escrever uma regra CSS que contenha esta propriedade é a seguinte:

seletor {

}

Onde:

1. medida-1: é o deslocamento da sombra para a direita (valor positivo) ou para a esquerda (valor negativo);

3. medida-3: é o raio para um efeito blur na sombra;

Os valores de medida-3 e de cor são opcionais.

Omitir a cor significa que a sombra terá a mesma cor definida para o texto.

O valor da cor pode ser declarado depois das medidas como mostrado no exemplo anterior ou antes das medidas, indiferentemente.

Considere como exemplo os seguintes códigos:

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

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

Veja a seguir a renderização dos códigos do exemplo:

Construindo sites com CSS e (X)HTML

Se você está usando um navegador com suporte CSS3 para esta propriedade o texto acima está sendo visualizado como mostrado na figura a seguir, que é um screenshot retirado do navegador Opera 9.5b. Se o seu navegador não suporta a propriedade o texto acima é na cor preta sem a sombra verde.

O efeito blur

Efeito blur é uma funcionalidade presente em qualquer editor de imagens que consiste em "borrar" ou "desfocar" uma área de cor sólida. Vamos aplicar o efeito blur na sombra do exemplo anterior acresentando um raio de 10px para este efeito como mostrado a seguir:

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

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

Veja a seguir a renderização dos códigos do exemplo:

Construindo sites com CSS e (X)HTML

Se você está usando um navegador com suporte CSS3 para esta propriedade o texto acima está sendo visualizado como mostrado na figura a seguir, que é um screenshot retirado do navegador Opera 9.5b. Se o seu navegador não suporta a propriedade o texto acima á na cor preta sem o efeito blur esverdeado.

Combinando sombras

A propriedade text-shadow admite a aplicação de várias sombras declarando uma lista de grupo de valores como mostrado nos exemplos anteriores, separados por vírgula. Veja o exemplo a seguir:

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

CSS:
h1 {
    font-size: 25px; 
    background:#000;
    padding:40px 10px;
    color:#fff; 
    text-shadow: 30px -30px #0f0, 20px -20px #f00, 10px -10px #ff0; 
    }

Veja a seguir a renderização dos códigos do exemplo:

Se você está usando um navegador com suporte CSS3 para esta propriedade o texto acima está sendo visualizado como mostrado na figura a seguir, que é um screenshot retirado do navegador Opera 9.5b. Se o seu navegador não suporta a propriedade o texto acima é na cor branca em fundo preto sem o efeito de três sombras.

Combinando efeitos

Combinar valores para sombras com efeito blur pode resultar em algunas efeitos bastante interessantes com o mostrado a seguir:

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

CSS:
h1 {
    font-size: 25px; 
    background:#660;
    padding:20px;
    color:#660; 
    text-shadow: 0 0 20px #fff, 0 -10px 20px #fff, 
	0 10px 20px #fff, -20px 0 40px #fff, 
	20px 0 40px #fff; 
    }

Veja a seguir a renderização dos códigos do exemplo:

Se você está usando um navegador com suporte CSS3 para esta propriedade o texto acima está sendo visualizado como mostrado na figura a seguir, que é um screenshot retirado do navegador Opera 9.5b. Se o seu navegador não suporta a propriedade você verá apenas uma tarja em tom verde sem texto.

Outro efeito

Screenshot:

Livro do Maujor

Será lançado no fim deste mês de novembro o livro Construindo sites com CSS e (X)HTML de autoria do Maurício Samy Silva. Ver detalhes...

Todos os artigos de Mauricio Samy

7 comentários publicados

• 1. Muito Show!!!

  Quinta-feira, 29/11/2007, por marco antonio soares
  

  Espero que todos os navegadores implementem esse recurso de forma decente....

  Responder comentário

• 2. Muito interessante

  Sábado, 01/12/2007, por angelo noguera
  

  Esperamos todos o suporte a essa 'novidade' com a maior rapidez possível!

  Responder comentário

• 3. Livro Universal de CSS

  Terça-feira, 04/12/2007, por Alexsandro Rosa de Mello
  

  Será que alguém pode me indicar um bom livro que demonstre todos os códigos em CSS e a utilização para cada navegador? Eu não consigo programar em TableLess para todos os navegador, ou melhor, só consigo para IE e Opera, em FF e Mozilla fica tudo péssimo. Obrigado!

  Responder comentário

• 4. Bom censo

  Quarta-feira, 05/12/2007, por Tiago Kochenborger
  

  Interessante mais isso vai poder ser usado de forma meio estravagante como até um exemplo acima e outro problema seria o suporte dos navegadores mais isso é outro problema gostei dessa novidade!!! Um Grande Abraço

  Responder comentário

• 5. Super interessante

  Domingo, 23/12/2007, por Rodrigo Luiz Genz
  

  ae curti mesmo essa matéria .. acho que a aplicabilidade de todos os brownser's deveria ser imediata no ano de 2008, já quanto aos webdesigners "filho do meu amigo ", acho que estes não se atreverão a usar algo que não tem conhecimento, mas para nós que possuímos conhecimento sobre tal será de grande uso.
  adorei o artigo e quanto ao livro de publicação serei um dos compradores desde já ;)
  vlw continue assim !!

  Responder comentário

• 6. Materia legal

  Quarta-feira, 20/02/2008, por Samuel Henrique
  

  Muito bom quem curti CSS

  Responder comentário

• 7. Sombras

  Sábado, 11/04/2009, por Max Oliveira
  

  Sinceramente, não consigo ver como fazer bom uso disso não.

  Responder comentário

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.

Indique para um amigo

Tags relacionadas

microsoft mercado seguranca web google lançamento android mobile desenvolvimento twitter criação brasil windows crescimento internet linux php yahoo apple iphone 3g youtube tecnologia celular publicidade ti

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!