Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Texto com sombras

O CSS nível 3 tem uma propriedade chamada 'texto com sombras' para adiccionar uma sombra a cada letra do texto. Na sua forma mais simple, é uma coisa como isto:

h3 {text-shadow: 0.1em 0.1em #333}

Adiccionou-se uma sombra cinzento escuro(#333) um pouco à direita(0.1em) e em baixo(0.1em) relativo ao texto normal: O resultado é este:

(Em Agosto de 2005, nem todos os navegadores suportavam ainda 'texto com sombras. A explicação em cima funciona bem no Safari e no Konqueror.)

Texto com sombras frisado

A forma simples da propriedade do 'texto com sombras' tem duas partes: a cor (como em cima #333) e uma compensação (0.1em0.1em no exemplo em cima. Isto resulta numa sombra fina indicada na compensação. Mas a compensação também pode ser frisada, resultando numa sombras mais ou menos turva.

O montante de frisado é dado como uma compensação. Aqui estão duas linhas, uma com pouco frisado(0.05em) outra como muito frisado(0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}

h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Texto branco que se pode ler

As sombras podem tornar um texto mais lido se o contraste entre o primeiro plano e o fundo é pequeno. Aqui está um exemplo de texto branco num pálido fundo azul, primeiro sem as sombras e depois com elas:

h3 {color: white}

h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Sombras Múltiplas

Também pode ter mais de uma sombra. Em geral, isso parece estranho:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,

      -0.3em 0.1em 0.1em #060,

      0.4em -0.3em 0.1em #006}

Mas com duas sombras escuras e claras bem colocadas, o efeito pode ser útil:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}

h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Isto é um bocado perigoso, como pode ver se o teu navegador não suporta o 'texto com sombra'. De facto, as cores do fundo e o texto neste exemplo são quase o mesmo (#CCCCCC e #D1D1D1), então sem as sombras, não existe quase contraste.

Desenhar letras com esboços

O exemplo das duas sombras da versão anterior pode ser levada mais longe. Com quatro sombras, às letras podemos dar um esboço:

h3 {text-shadow: -1px 0 black, 0 1px black,

      1px 0 black, 0 -1px black}

Não é um esboço perfeito, e nesta altura (Agosto 2005), a discução ainda está aberta se o CSS deve ou não ter um propriedade separada ( ou talvez um valor para 'deroração-texto') para criar melhores esboços.

Brilho de Neon

Se puseres uma sombra frisada mesmo por trás do texto,i.e., com a compensação zero, o efeito é para criar um brilho em volta das letras. Se o brilho de uma sombra única nem é intenso o suficiente, repete a mesma sombra mais vezes:

h3.a {text-shadow: 0 0 0.2em #8F7}

h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}

h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,

        0 0 0.2em #87F}