Crie efeitos de texto com Dreamweaver MX

Autor：Eve Cole Data da Última Atualização：2009-05-31 21:03:30

Nossa ferramenta de criação de páginas da web comumente usada, Dreamweaver MX, pode não apenas criar páginas da web, mas também usar filtros CSS para realizar efeitos especiais simples em texto ou imagens. Vamos dar uma olhada em alguns exemplos para ver como criar texto com efeitos especiais no Dreamweaver.

palavra auréola

Primeiro inicie o Dreamweaver, insira uma tabela 1×1 em um novo documento, defina a borda como 0 e insira o texto que precisa ser modificado.

Clique em "Design → Estilo CSS" no painel flutuante à direita para abrir este painel flutuante.

Os quatro botões no canto inferior direito do painel são: adicionar, criar, editar e excluir estilos CSS.

Nota: No Dreamweaver, os filtros CSS só podem ser usados em objetos com restrições de área, como tabelas, células, imagens, etc., mas não podem ser usados diretamente no texto, por isso precisamos colocar o texto que precisa ser adicionado com especial efeitos na tabela com antecedência e, em seguida, aplique estilos CSS à tabela para criar efeitos especiais no texto.

Figura 1 Novo estilo CSS

Clique no botão Novo estilo CSS para abrir a caixa de diálogo mostrada na Figura 1.

Selecione "Criar estilo personalizado" para o item "Tipo", selecione "Somente para este documento" para "Definido em" e clique em OK para abrir a caixa de diálogo de definição de estilo CSS (Figura 2). definimos fontes, tamanhos de fonte, cor e outros conteúdos, neste exemplo escolhemos a fonte para ser o script oficial, o tamanho para ser 50 pixels e a cor para ser branca.

Figura 2 Para definir estilos CSS

para produzir efeitos de texto, o mais importante são as configurações no painel de extensão (Figura 3). Todos os filtros CSS estão listados no filtro em “Efeitos Visuais”. o texto tem um efeito de borda brilhante. O formato de sintaxe do filtro Glow é: Glow(Color=?, Strength=?), que possui dois parâmetros: Color determina a cor do halo Você pode usar códigos hexadecimais como ffffff ou palavras como Red e Yellow. Representa; Força representa a intensidade luminosa, variando de 0 a 255. Neste exemplo definimos a cor para Vermelho, a intensidade luminosa para 8 e depois OK.

Figura 3 Configure o filtro Glow

A seguir aplicamos este estilo CSS à tabela. Mova o cursor para a célula, clique no rótulo no canto inferior esquerdo da janela do documento para selecionar a célula e, a seguir, clique no estilo recém-criado no painel de estilo CSS. Neste momento, o rótulo muda para indicar que o estilo CSS. foi aplicado à célula. Não podemos ver a alteração na janela do documento. Pressione a tecla F12 para visualizar no IE e o efeito aparecerá (Figura 4).

Figura 4 Efeito de palavra Halo

Que tal? Não é inferior ao efeito de filtro do Photoshop. Colocar algumas dessas palavras de efeitos especiais em uma página da web tornará a página muito mais bonita, e também podemos usar a tecla PrintScreen para capturar a tela e, em seguida, colá-la e salvá-la no programa de desenho para torná-la uma imagem separada.

palavra sombra

Existem dois filtros CSS que podem produzir efeitos de sombra no texto, nomeadamente Drowshadow e Shadow. Os efeitos que eles produzem são ligeiramente diferentes.

As etapas para criar palavras sombreadas são basicamente as mesmas que para criar palavras halo. Você só precisa selecionar novamente um filtro no estilo CSS.
A sintaxe do filtro Drowshadow é a seguinte: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

Entre eles, Color representa a cor da sombra, expressa como um número hexadecimal, OffX e OffY representam respectivamente a quantidade de desvio da sombra em relação à posição do texto, em pixels Positivo é um valor lógico, 1 representa a criação de sombras para todos os opacos; elementos, 0 Representa a criação de sombras visíveis para todos os elementos transparentes.

Figura 5 Efeito de palavra sombra

Por exemplo, se o filtro estiver definido como DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1), o efeito será conforme mostrado na Figura 5.

Máscara de palavras

O filtro CSS também nos fornece uma função de máscara, que pode processar a parte do texto em uma máscara. Se uma imagem adequada for usada no fundo, um belo efeito de texto oco pode ser produzido.

Insira uma tabela 1×1 na janela do documento, clique no rótulo no canto inferior esquerdo da janela do documento para selecionar a tabela inteira, selecione uma imagem adequada na imagem de fundo do inspetor de propriedades (como mostrado na Figura 6) e em seguida, insira o texto necessário.

Figura 6 Inserir uma imagem de fundo na tabela

A seguir adicionamos um filtro Máscara à célula, os passos são semelhantes aos dois exemplos anteriores. Selecione Mask (Color=?) no filtro. Este parâmetro determina a cor da máscara.

Nota: A seleção da cor do texto neste exemplo não é importante, pois o texto ficará vazio no efeito final e a cor não será exibida.

Figura 7 Após definir o efeito da máscara de palavra

, aplique este estilo CSS à célula e pressione a tecla F12 para ver o efeito (Figura 7).

Nota: A imagem de fundo é adicionada para toda a tabela, correspondendo à tag <table>, enquanto o estilo CSS é adicionado à célula, que é a tag <td>.

Palavras dinâmicas

Para criar palavras dinâmicas, precisamos usar o filtro Blur, que é usado para produzir um efeito de desfoque. Seu formato de sintaxe é Blur(Add=?, Direction=?, Strength=?). O parâmetro Add é um valor booleano. De modo geral, quando o filtro é usado para imagens, ele leva 0, e quando é usado para texto, leva 1. Direção representa a direção do desfoque e a unidade é um ângulo; o valor do movimento do desfoque e a unidade são pixels. Por exemplo, se definirmos Blur(Add=1, Direction=90, Strength=150), você poderá ver o efeito conforme mostrado na Figura 8 na visualização.

Figura 8 Amigos com efeito de palavra dinâmica

Na verdade, muitos filtros em CSS também podem ser usados para modificar imagens. Por exemplo, o filtro Desfoque pode produzir um efeito de desfoque nas imagens. Se pudermos aplicar esses filtros com habilidade, às vezes poderemos criar efeitos de imagem muito bons sem um software profissional de processamento de imagem.