Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Este documento é uma tradução de português (Europeu) do documento Inglês oficial.:
http://www.w3.org/Style/Examples/007/text-shadow.html. Esta tradução foi proporcionada por Elisa Maria e pode conter alguns erros. Para eliminar dúvidas por favor consulte a versão oficial deste documento em Inglês. Versão de Português (Europeu):http://www.internetbootcamp.net/007/text-shadow.html
http://www.internetbootcamp.net
Homes For Sale in Sevierville TN, Gatlinburg Investment Cabins For Sale

(This page uses CSS style sheets)

Texto com sombras

Texto com sombras frisado

Texto branco que se pode ler

Sombras Múltiplas

Desenhar letras com esboços

Brilho de Neon

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:

The noak and the barcicle

(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}

"O que é que estás a dizer?" diz o UK

Para ver mais claramente

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}

Sem as sombras:

O que é que eu ganho com isso?

Com sombras:

Com um pá e algumas laranjas

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}

Eu desejo, desejo, desejo...

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}

Olá, Augustos(Tu sabes quem é)

Isso é extra, claro

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}


Estas a sentir-te vermelho?

Um gato, uma maçã, etcetcra

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}

Com um Zelhor do Melhor

Não existe não não melhor que um não

De facto, muito verdade, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
geschreven 4 augustus 2005;
laatste update datum: 2008/09/23 11:18:02 $ GMT