Dreamweaver CS6: Adicionando Sombras de texto com CSS3

No Dreamweaver CS6, você pode melhorar seus projetos e dar suas páginas uma maior profundidade, adicionando sombras de texto com as regras CSS3, o mais recente em tecnologia web. Adicionar sombras de texto faz com que suas palavras mais fáceis de ler, especialmente se o seu projeto tem um fundo complexo ou se o seu fundo e de texto cores falta de contraste.

Dreamweaver CS6 inclui suporte para CSS3 sombras de texto 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 para elementos HTML existentes, definindo um estilo de tag, tais como o estilo de título 1 usada 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 de especificar que a sombra de texto deve estender 2 pixels para a direita e 2 pixels abaixo do texto com um borrão 3-pixel. Além disso, a sombra é criado com a cor preta, especificado pelo código abreviado cor hexadecimal # 000.

Ao criar regras para as sombras do texto você pode especificar até quatro valores:

  • Horizontal e vertical: Os dois primeiros valores numéricos são necessários e especificar os deslocamentos horizontal e vertical - a distância que a sombra da gota se estende por baixo do texto (horizontal) e à direita do texto (vertical).

  • raio de desfoque: O terceiro valor especifica a quantidade de borrão na sombra. Se você não incluir raio de desfoque, o padrão é 0, o que torna a sombra aparece como uma cor sólida.

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

Você pode adicionar uma sombra de texto usando o painel de propriedade no fundo do painel Estilos CSS, como mostrado na imagem. Para fazer isso, siga estes passos:

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

  2. Digite o estilo CSS3 nome da regra, text-shadow, ou selecione a regra de estilo a partir da lista drop-down.

    Depois que o nome aparece no lado esquerdo, uma pequena seta aparece no lado direito.

  3. Clique para selecionar a seta à direita do text-shadow.

    Aparece uma caixa.

  4. Digite o X e Y deslocamentos, raio de desfoque, e cor.

Semelhante

menu