Sombras de texto

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript permitem sombras em texto usando a propriedade  text-shadow CSS3 (Folhas de Estilos em Cascata, Nível 3).

A propriedade text-shadow

A propriedade text-shadow aplica um efeito de sombra projetada ao texto especificado e é definida no  Módulo de Decoração de Texto do CSS3 do W3C (World Wide Web Consortium). Se você estiver familiarizado com a sintaxe da propriedade box-shadow, já sabe a sintaxe para text-shadow, pois elas são quase idênticas.

PropriedadeDescrição

text-shadow

Uma lista de sombras separadas por vírgulas que anexa uma ou mais sombras ao texto especificado. Cada sombra é composta de uma lista delimitada por espaço do seguinte:

  • horizontal offset  Obrigatório. Um valor positivo desenha uma sombra deslocada à direita do texto, um comprimento negativo à esquerda.
  • vertical offset  Obrigatório. Um valor positivo desenha uma sombra deslocada abaixo do texto, um negativo acima.
  • blur distance  Valores negativos não são permitidos. Se o valor de blur for zero, a borda da sombra será nítida. Caso contrário, quanto maior o valor, mais a borda da sombra fica desfocada.
  • spread distance  Os valores positivos fazem com que a forma da sombra se expanda em todas as direções no raio especificado. Os valores negativos fazem com que a forma de sombra se contraia. (Esteja ciente de que esse valor pode não ter suporte em todos os navegadores.)
  • color  Qualquer um dos valores de cores CSS (Folhas de Estilos em Cascata) aceitos.

 

A sintaxe para a propriedade text-shadow é idêntica à sintaxe para a propriedade box-shadow, exceto pelo fato de que a propriedade text-shadow não reconhece a palavra-chave inset.

O exemplo a seguir aplica uma sombra cinza escura com um pequeno valor de desfoque ligeiramente para a direita e abaixo do texto especificado:


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

Isso resulta no seguinte quando o seletor é aplicado a um bloco de texto curto:

O texto "Internet Explorer 10" com sombreamento de texto cinza aplicado a ele.

O W3C tem uma página cheia de text-shadow dicas e exemplos: Sombras para texto CSS.

Referência de API

text-shadow

Amostras e tutoriais

Exemplo de sombra de texto CSS
Como adicionar efeitos de texto divertidos usando CSS

Demonstrações do Test Drive do Internet Explorer

Prática: sombra de texto

Postagens no blog do IE

Migrando para elementos gráficos da Web baseados em padrões no IE10
Sombra de texto CSS3 no IE10

Especificação

Módulo de Decoração de Texto do CSS3: Seção 4

Tópicos relacionados

Telas de fundo e bordas
Dominando CSS3: sete amostras interessantes de sombra de texto que você precisa conhecer
Dominando CSS3: sombras de texto

 

 

Mostrar:
© 2014 Microsoft