Idiomas

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

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Nesta página:

Sombras em textos

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:

The noak and the barcicle

Sombra esfumaçada em textos

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}

“What do you say?” said the UK

In order to see more clearly

Texto na cor branca e legível

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:

What is in it for me?

Com sombra:

With a shovel and some oranges

Sombras múltiplas

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}

I wish wish wish…

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}

I, Augustus (you know who)

That's extra, of course

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.

Desenhando o contorno de letras

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}

Are you feeling red?

A cat, an apple, etcetera

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.

Efeito neon

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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

Criado em 4 de agosto de 2005;
Atualizado qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções