Superdicas do Dreamweaver, efeitos de texto

Objetivo do aplicativo: Criar efeitos especiais de texto

Software de aplicativo: Dreamweaver MX

Dificuldade de operação: ★★☆☆☆

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

O Halo Word

primeiro inicia o Dreamweaver, insere uma tabela 1×1 em um novo documento, define a borda como 0 e, em seguida, insere 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 Crie um novo estilo CSS

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

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 a fonte, tamanho da fonte, cor e demais 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 Após definir o filtro Glow

, aplicaremos este estilo CSS à tabela. Mova o cursor para a célula, clique no rótulo no canto inferior esquerdo da

janela

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 E o efeito das palavras halo

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.

palavras de sombra

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 Shadow Word

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

de palavra de máscara

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

Em seguida 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 a toda a tabela e corresponde ao rótulo, enquanto o estilo CSS é adicionado à célula e é o rótulo.

dinâmicos

, 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 Efeito de palavra dinâmico

Na verdade, muitos filtros em CSS também podem ser usados ​​para modificar imagens, como o filtro Blur, que 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.