Dreamweaver Super Tips Efectos de texto

Objetivo de la aplicación: Crear efectos especiales en el texto

Software de aplicación: Dreamweaver MX

Dificultad de operación: ★★☆☆☆

Nuestra herramienta de creación de páginas web comúnmente utilizada, Dreamweaver MX, no solo puede crear páginas web, sino también usar filtros CSS para realizar efectos especiales simples en texto o tratar con imágenes. Echemos un vistazo a algunos ejemplos para ver cómo crear texto con efectos especiales en Dreamweaver.

Halo Word

primero inicia Dreamweaver, inserta una tabla de 1 × 1 en un documento nuevo, establece el borde en 0 y luego ingresa el texto que debe modificarse.

Haga clic en "Diseño → Estilo CSS" en el panel flotante de la derecha para abrir este panel flotante.

Los cuatro botones en la esquina inferior derecha del panel son: agregar, crear, editar y eliminar estilos CSS.

Nota: En Dreamweaver, los filtros CSS solo se pueden usar en objetos con restricciones de área, como tablas, celdas, imágenes, etc., pero no se pueden usar directamente en texto, por lo que debemos colocar el texto que se debe agregar con etiquetas especiales. efectos en la tabla de antemano y luego aplique estilos CSS a la tabla para crear efectos especiales en el texto.

Figura 1 Cree un nuevo estilo CSS.

Haga clic en el botón Nuevo estilo CSS y aparecerá el cuadro de diálogo que se muestra en la Figura 1.

Seleccione "Crear estilo personalizado" para el elemento "Tipo", seleccione "Solo para este documento" para "Definido en" y haga clic en Aceptar para que aparezca el cuadro de diálogo de definición de estilo CSS (Figura 2, podemos). defina la fuente, el tamaño de fuente, el color y otro contenido; en este ejemplo, elegimos que la fuente sea script oficial, el tamaño sea de 50 píxeles y el color sea blanco.

Figura 2 Para definir estilos CSS

para producir efectos de texto, lo más importante es la configuración en el panel de extensión (Figura 3). Todos los filtros CSS se enumeran en el filtro en "Efectos visuales". Seleccione el filtro Resplandor. el texto tiene un efecto de borde brillante. El formato de sintaxis del filtro Resplandor es: Resplandor (Color =?, Fuerza =?), que tiene dos parámetros: Color determina el color del halo. Puede utilizar códigos hexadecimales como ffffff o palabras como Rojo y Amarillo. Representa; Fuerza representa la intensidad luminosa, que va de 0 a 255. En este ejemplo configuramos el color en Rojo, la intensidad luminosa en 8 y luego en OK.

Figura 3 Después de configurar el filtro Resplandor

, aplicaremos este estilo CSS a la tabla. Mueva el cursor a la celda, haga clic en la etiqueta en la esquina inferior izquierda de la

ventana

No podemos ver el cambio en la ventana del documento. Presione la tecla F12 para obtener una vista previa en IE y aparecerá el efecto (Figura 4).

Figura 4 ¿Qué tal el efecto de las palabras de halo

? No es inferior al efecto de filtro de Photoshop. Poner algunas de estas palabras de efectos especiales en una página web hará que la página web sea mucho más hermosa, y también podemos usar la tecla Imprimir Pantalla para capturar la pantalla y luego pegarla y guardarla en el programa de dibujo para convertirla en una imagen separada.

palabras de sombra

que pueden producir efectos de sombra en el texto, a saber, Drowshadow y Shadow. Los efectos que producen son ligeramente diferentes.

Los pasos para crear palabras de sombra son básicamente los mismos que para crear palabras de halo. Solo necesita volver a seleccionar un filtro en el estilo CSS.

La sintaxis del filtro Drowshadow es la siguiente: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).

Entre ellos, Color representa el color de la sombra, expresado como un número hexadecimal; OffX y OffY representan respectivamente la cantidad de desviación de la sombra desde la posición del texto, en píxeles. Positivo es un valor lógico, 1 representa la creación de sombras para todos los opacos; elementos, 0 Representa la creación de sombras visibles para todos los elementos transparentes.

Figura 5 Efecto de palabra de sombra

Por ejemplo, si el filtro está configurado en DropShadow (Color=6699cc, OffX=2, OffY=2, Positivo=1), el efecto será como se muestra en la Figura 5.

de palabra de máscara

también nos proporciona una función de máscara, que puede procesar la parte del texto en una máscara. Si se usa una imagen adecuada en el fondo, se puede producir un hermoso efecto de texto hueco.

Inserte una tabla de 1 × 1 en la ventana del documento, haga clic en la etiqueta en la esquina inferior izquierda de la ventana del documento para seleccionar la tabla completa, seleccione una imagen adecuada en la imagen de fondo del inspector de propiedades (como se muestra en la Figura 6) y luego ingrese el texto requerido.

Figura 6

A continuación agregamos un filtro de Máscara a la celda, los pasos son similares a los dos ejemplos anteriores. Seleccione Máscara (Color=?) en el filtro. Este parámetro determina el color de la máscara. Elegimos blanco.

Nota: La selección del color del texto en este ejemplo no es importante, porque el texto quedará ahuecado en el efecto final y el color no se mostrará.

configurar

el efecto de la palabra de máscara

Nota: La imagen de fondo se agrega a toda la tabla y corresponde a la etiqueta, mientras que el estilo CSS se agrega a la celda y es la etiqueta.

dinámicos

, necesitamos usar el filtro Desenfoque, que se usa para producir un efecto de desenfoque. Su formato de sintaxis es Desenfoque (Agregar=?, Dirección=?, Fuerza=?). El parámetro Agregar es un valor booleano. En términos generales, cuando el filtro se usa para imágenes, toma 0 y cuando se usa para texto, toma 1. La dirección representa la dirección del desenfoque y la unidad es un ángulo; el valor del movimiento de desenfoque y la unidad son píxeles. Por ejemplo, si definimos Desenfoque (Agregar = 1, Dirección = 90, Fuerza = 150), puede ver el efecto como se muestra en la Figura 8 en la vista previa.

Figura 8 Efecto de palabra dinámica

De hecho, muchos filtros en CSS también se pueden usar para modificar imágenes, como el filtro Desenfoque, que puede producir un efecto de desenfoque en las imágenes. Si podemos aplicar estos filtros con habilidad, a veces podemos crear efectos de imagen bastante buenos sin un software de procesamiento de imágenes profesional.