Bert
Bos, Coordenador das atividades das
CSSCopyright © 1994–2021 W3C® Privacy policy
Criado em 4 de agosto de 2005;
Atualizado qua 06 jan 2021 05:40:49 UTC
Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva
Ver index para todas as dicas.
Nesta página:
As CSS3 prevêem uma propriedade denominada 'text-shadow' destinada a definir sombra a cada uma das letras de um texto. Na sua forma mais simples o efeito é obtido com uso da seguinte regra CSS:
h3 {text-shadow: 0.1em 0.1em #333}
Esta regra CSS cria uma sombra na cor cinza escura (#333) deslocada de 0.1em para a direita e para baixo em relação ao texto propriamente dito. O resultado é conforme mostrado a seguir:
A forma mais simples de declaração de sombra CSS resume-se à definição de dois valores para a propriedade 'text-shadow': uma cor (tal como #333 que usamos no exemplo anterior) e um deslocamento da sombra (tal como 0.1em 0.1em que usamos no exemplo anterior). Essa declaração resulta em uma sombra sólida. Pode-se definir uma sombra mais ou menos esfumaçada em lugar da sombra sólida.
A quantidade do "esfumaçamento" é definida com acréscimo de mais um valor (raio blur) para a propriedade 'text-shadow'. Observe a seguir as duas linhas CSS: a primeira com um pequeno raio blur (0.05em) e a segunda com grande raio blur (0.2em) definindo pouco e muito efeito de esfumaçamento respectivamente:
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Sombras podem ser usadas para aumentar a legibilidade de textos em cores com pouco contraste com o fundo onde foram escritos. A seguir mostramos o exemplo de um texto na cor branca escrito em fundo em tom de azul claro. Para melhor visualização do contraste obtido mostramos o mesmo texto com e sem sombra.
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Sem sombra:
Com sombra:
Pode-se definir mais do que uma sombra para o mesmo texto. Em geral este é um efeito que se parece um tanto 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}
Contudo escolhendo-se e posicionando-se convenientemente cores escura e clara é possível obter-se efeitos interessantes e úteis:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
Este efeito pode ser perigoso caso o navegador não suporte a propriedade 'text-shadow'. Sendo as cores de fundo e do texto muito parecidas (#CCCCCC and #D1D1D1) a ausência da sombra resulta em contraste baixíssimo entre texto e fundo.
O exemplo mostrado anteriormente para aplicação de duas sombras simultaneamente pode ser estendido. Definindo quatro sombras é possível criar o efeito de desenhar o contorno das letras do texto conforme mostrado a seguir:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Não é um contorno perfeito e atualmente (agosto de 2005) está em andamento discussão sobre a conveniência ou não de se criar uma nova propriedade CSS (ou talvez um valor para a propriedade 'text-decoration') tcapaz de criar o efeito de contorno de textos.
Se você definir uma sombra esfumaçada exatamente atrás do texto, ou seja, sombra com deslocamento zero o efeito obtido será de esfumaçamento ao redor das letras. Se o efeito não for intenso com uso de uma única sombra, defina a sombra várias vezes, conforme mostrado a seguir:
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}
Bert
Bos, Coordenador das atividades das
CSSCriado em 4 de agosto de 2005;
Atualizado qua 06 jan 2021 05:40:49 UTC