Como adicionar gota de texto e sombras em dreamweaver

Você pode melhorar seus projetos no Dreamweaver e dar suas páginas uma maior profundidade, adicionando sombras de imagens, tags e outros elementos. Adicionar sombras de texto faz com que suas palavras mais fáceis de ler, especialmente se o seu projeto tem um fundo complexo ou as cores do primeiro plano e falta de contraste.

[Foto por iStockphoto.com]

Dreamweaver CC oferece melhor suporte e integração de CSS3 sombras e sombras de texto a partir do novo painel CSS Designer.

Video: 05 Dreamweaver - Formatar texto e estilo 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, como o estilo de título 1 visto aqui. O código CSS3 que cria essa sombra de texto é

h1 {text-shadow: 2px 2px 2px # 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 o texto com um borrão de 2 pixels. Além disso, a sombra é criado com a cor preta, especificado pelo código de cor hexadecimal abreviado # 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 horizontais e verticais - a distância a sombra se estende abaixo do texto (vertical) E para a direita do texto (horizontal).

  • raio de desfoque: O terceiro valor especifica a quantidade de desfocagem 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.

Video: Cómo poner Texto con Sombra en DreamWeaver TUTORIAL Diseño web - html, css

Escolher uma cor RGBa para a opção de cores dá-lhe maior controle sobre a aparência da sombra porque você pode adicionar transparência.

Você pode adicionar uma sombra de texto usando o painel Propriedades na parte inferior do painel CSS Designer. Para fazer isso, siga estes passos:

Video: VIDEO AULA COMO COLOCAR VIDEO NO DREAMWEAVER

  1. Desça até a seção Text-Shadow of painel Propriedades de CSS Designer.

  2. Digite o tamanho da sombra que você deseja exibir usando o H-sombra (horizontal) e V-sombra campos (vertical).

  3. Adicione a quantidade de desfoque que você quer para a sua sombra texto, inserindo um tamanho no campo Blur.

    Video: Sombra em texto, HTML5 CSS3. Vídeo 51

  4. Clique na cor bem e selecionar a cor seu quer usar na sombra texto.


Publicações relacionadas