Transiciones CSS3 en Dreamweaver CS6

• Abril 20, 2024

Con la incorporación de HTML5 y CSS3, los sitios web interactivos se están convirtiendo en lo esperado. Ahora con Dreamweaver^R CS6 y el nuevo panel de Transiciones CSS, puede crear sus propios efectos interactivos sin la necesidad de escribir ningún código. El resultado de este proceso es solo CSS3, sin JavaScript. Por lo tanto, no debe preocuparse si el visor ha habilitado JavaScript. Las transiciones creadas por Dreamweaver pueden reproducirse en cualquier navegador web moderno.

Veamos qué fácil es crear nuestras propias transiciones interactivas. La transición se puede aplicar a cualquier clase, ID o elemento CSS. Todo lo que tenemos que hacer es establecer los valores en el panel Transiciones CSS.

1. Nuestro primer paso es seleccionar el elemento al que deseamos aplicar la transición. En nuestro ejemplo, será un enlace de menú.
   
   
2. Haga clic en Ventana - Transiciones CSS para abrir el panel.
   
   
3. En el panel Transiciones CSS, haga clic en el signo más para agregar una transición.
   
   
4. En el cuadro de diálogo Nueva transición, podemos usar el menú Regla de destino para elegir entre los ajustes preestablecidos o escribir nuestro propio nombre para la transición. Escribamos el nombre .morph.
   
   
5. A continuación, debemos elegir la acción que desencadenará la transición. En el menú Transición activada, elija Desplazar para que la transición se active cuando colocamos el mouse sobre el enlace. Otras opciones incluyen: activo, verificado, deshabilitado, habilitado, foco, flotar, indeterminado y objetivo.
   
   
6. Para la opción de menú, tenemos dos opciones. Elijamos el primero.
   
   Utilice la misma transición para todas las propiedades.
   Use una transición diferente para cada propiedad
   
   
7. Para la duración y el retraso de la transición, podemos utilizar segundos o milisegundos. Establezcamos la Duración en 1 segundo y el Retardo en .05 segundos.
   
   
8. Para la función de sincronización, tenemos varias opciones de relajación. Elija Ease Out.
   
   
9. Para agregar una propiedad CSS, haga clic en el signo más y elija uno de la lista emergente. Elija el color de fondo.
   
   
10. Una vez que hemos elegido una propiedad, podemos establecer el valor final para la transición. Dependiendo de la propiedad que hayamos elegido, el menú Valor final nos dará el menú correspondiente para esa propiedad. Para el color de fondo obtenemos el selector de color. Si agregamos la propiedad Font-Weight, obtenemos un menú de pesos preestablecidos.
    
    
11. Finalmente, debemos elegir dónde crear la transición. Nuestras opciones son Este documento solamente o Nuevo archivo de hoja de estilo. Usemos el primero.
    
    

Una vez que hacemos clic en el botón Crear transición, podemos ver que la transición se ha enumerado en el panel Transiciones CSS, lo que indica que la transición se transformará por la acción de desplazamiento y se aplicará al objetivo a.morph.

Si verificamos la vista del código, vemos que se ha agregado la clase morph al enlace.

Cuando pasamos el mouse sobre el enlace en la Vista en vivo, el color de fondo cambiará.

Pero, ¿y si necesitáramos editar la transición? Podemos hacer esto a través del panel de Transiciones CSS.

1. Seleccione la transición a.morph y el icono Editar se activará (icono de lápiz).
   
   
2. Haga clic en el icono Editar para abrir el cuadro de diálogo Editar transición. Aquí podemos cambiar los valores según sea necesario o agregar una nueva Propiedad y Valor Final.
   
   

Ahora que hemos creado la transición de transformación, podemos aplicarla fácilmente a otros elementos porque ahora está disponible en el menú Regla de destino.

* Adobe me proporcionó una copia de este software para fines de revisión.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Transiciones CSS3 con Dreamweaver CS6 (Abril 2024).