Dreamweaver CS6: Adicionando Sombras de Texto com CSS3 - dummies

Parte do Dreamweaver CS6 para Dummies Cheat Sheet

No Dreamweaver CS6, você pode aprimorar seus projetos e dar suas páginas de maior profundidade, adicionando sombras de texto com regras CSS3, o mais recente em tecnologia web. Adicionar sombras de texto torna suas palavras mais fáceis de ler, especialmente se o seu design tiver um fundo complexo ou se o seu fundo e cores de texto não tiverem contraste.

crédito: Paul Gual, istockphoto. com

O Dreamweaver CS6 inclui suporte para sombras de texto CSS3 quando você usa o painel Propriedades no painel Estilos CSS. Você pode criar estilos de classe ou ID com sombras de texto e você pode adicionar sombras de texto aos elementos HTML existentes, definindo um estilo de tag, como o estilo do título 1 usado na imagem.

O código CSS3 que cria essa sombra de texto é

h1 {text-shadow: 2px 2px 3px # 000;}

Os números no código especificam que a sombra do texto deve estender 2 pixels para a direita e 2 pixels abaixo do texto com um borrão de 3 pixels. Além disso, a sombra é criada com a cor preta, especificada pelo código de cores hexadecimal abreviado n. 000.

Ao criar regras para sombras de texto, você pode especificar até quatro valores:

• Horizontal e vertical: Os dois primeiros valores de número são necessários e especifique os deslocamentos horizontais e verticais - a distância a sombra da gota se estende abaixo do texto (horizontal) e à direita do texto (vertical).

• Raio de borrão: O terceiro valor especifica a quantidade de desfocagem na sombra. Se você não incluir o raio de desfocagem, o padrão é 0, o que faz com que a sombra apareça como uma cor sólida.

• Cor: O quarto valor especifica a cor da sombra e pode ser definido usando um código de cor hexadecimal ou um código de cores RGBa.

Você pode adicionar uma sombra de texto usando o painel Propriedade na parte inferior do painel CSS Styles, conforme mostrado na imagem. Para fazer isso, siga estas etapas:

1. Clique no link Adicionar propriedade no lado esquerdo do painel Propriedade Estilos CSS.

2. Digite o nome da regra de estilo CSS3, sombra de texto ou selecione a regra de estilo na lista suspensa.

   Depois que o nome aparecer no lado esquerdo, uma pequena seta aparece à direita.

3. Clique para selecionar a seta à direita da sombra de texto.

   Aparece uma caixa.

4. Digite os deslocamentos X e Y, raio do borrão e cor.