Aunque los cambios implementados por CSS3 aún no son compatibles con todos los navegadores y la funcionalidad de los navegadores cruzados en aquellos que sí lo admiten puede ser una verdadera molestia, todavía es bastante divertido experimentar y ver qué es posible.
En este breve tutorial nos volveremos locos con las transiciones de CSS3 en Webkit para crear una página web simple que muestre algunos efectos de atenuación de color realmente agradables.
Efecto final
Solo para que puedas tener una idea de hacia dónde nos dirigimos, aquí tienes una demostración del efecto final.
Como puede ver, estamos utilizando las transiciones CSS3 de Webkit para cambiar el color de fondo, el color del texto, el color del enlace y el color del enlace flotante para agregarle vida a una página web sencilla. A medida que mueve el mouse hacia el rectángulo, el fondo, el color del texto y el color del enlace cambian. Luego, al pasar sobre un enlace se activará otra transición de color para el texto del enlace.
Tendremos que ceñirnos a Webkit en este caso, ya que las transiciones de Firefox aún están próximas (busque -moz-transition en Firefox 3.7).
Transiciones CSS3
Antes de comenzar, echemos un vistazo a la sintaxis básica de las transiciones CSS3 que usaremos. Básicamente, las transiciones de Webkit funcionan especificando tres elementos: la propiedad a transitar, la duración de la transición y la función de temporización. Aquí hay un ejemplo.
En el ejemplo anterior, hemos elegido hacer una transición lineal del color durante un período de un segundo. La función de temporización controla la velocidad del cambio a lo largo de la duración de la transición. La elección de lineal mantiene constante el ritmo de cambio mientras que la facilidad de elección acelerará ligeramente la transición a medida que avanza. Para obtener una explicación detallada de las opciones de la función de sincronización, consulte el artículo de Webkit.org sobre la animación CSS.
El ejemplo anterior solo seleccionó una única propiedad para la transición, pero también podemos elegir la transición de múltiples propiedades en un solo comando. Considera lo siguiente:
Este ejemplo selecciona tanto el color del texto como el color de fondo (separados por comas) para una transición de un segundo. La función de tiempo para el? Color? La propiedad es lineal mientras que el? fondo? A la propiedad se le asigna la función de facilidad.
Para obtener más información sobre este ejemplo, consulte el artículo de NetTuts sobre las transiciones de CSS3.
Comenzando: El HTML
Lo primero que haremos es lanzar una plantilla XHTML básica en blanco (podríamos haber utilizado HTML5 con la misma facilidad, pero decidí concentrarme en una nueva tecnología a la vez).
Una vez que haya eliminado la plantilla vacía, agregue un solo div para mantener el texto. Escriba lo que desee en esta área, solo asegúrese de agregar algunos enlaces para que pueda obtener el efecto completo de las transiciones.
¡Eso es! Como dije antes, estamos construyendo un ejemplo extremadamente simple, así que eso es todo el HTML que necesitará. Di el div a clase en lugar de un carné de identidad para que pueda agregar fácilmente otras áreas a la página que llevará a cabo esta funcionalidad.
CSS básico
El HTML solo ha generado un párrafo único y aburrido en este punto, por lo que dependeremos en gran medida de CSS para hacer que la página sea más atractiva.
Para empezar, agregaremos algunos estilos básicos directamente al cuerpo.
Aquí hemos establecido algunos estilos básicos para el fondo, el contenedor de texto y los enlaces en el contenedor de texto. Le dimos al fondo un color gris muy oscuro, hicimos que el texto fuera blanco y usamos el fragmento de código de Helvetica de Chris Coyier para darnos un bonito texto fino.
Por último, hemos diseñado los enlaces para que sean de color gris claro y no tengan decoración de texto. Esto es lo que deberías tener en este punto:
A continuación, expandiremos la sección textContainer dándole un borde delgado y alineando con el centro de la página. Esta última parte (centrándolo todo en la página) se logra al darle a la división un ancho y establecer el margen en automático. Asegúrate de que el centro alinee el texto también para que no se cuelgue en el lado izquierdo de la división.
Esto debería darle el aspecto básico que vio en la demostración.
Añadiendo la magia
Ahora que tenemos nuestra página diseñada básicamente, queremos agregar algunas transiciones de color para animar las cosas. El primer lugar que querremos incluir en una transición es en el textContainer principal. Usaremos el mismo código que vimos en la explicación de las transiciones CSS3 anteriores.
Esto establecerá una transición en cualquier cambio que hagamos al? Color? o? fondo? propiedades, utilizando una transición de un segundo y dos funciones de temporización diferentes: lineal y de entrada respectivamente.
A continuación, estableceremos una transición al texto del enlace para que cualquier cambio que realicemos en este color desencadene una segunda transición.
Como se indicó anteriormente, este código por sí mismo no hará nada. Simplemente se mantiene atento a los cambios en las propiedades especificadas. Cuando se produce un cambio debido a otros comandos de CSS, se realizará la transición con esta configuración.
El catalizador
Al configurar las transiciones, necesita un evento para desencadenar la transición. En CSS, uno de los eventos más fáciles y más comunes para trabajar es un evento flotante. Si bien los eventos de desplazamiento son más comúnmente aplicados a los enlaces (lo que haremos), también aplicaremos uno simplemente al div en su conjunto para que, al ingresar el mouse, se active la transición.
Como ya hemos configurado los comandos de transición, los eventos de desplazamiento son realmente fáciles y solo utilizan unas pocas líneas de código para cambiar los colores. Primero abordaremos el evento div hover.
Esto lo hará para que cuando el cursor de alguien entre en el div, el color del texto cambie a gris oscuro y el fondo cambie a blanco. Sin embargo, los colores de nuestros enlaces se mantienen en el mismo color gris que antes del evento flotante. Agregue el siguiente código para cambiar esto.
Esto lo establece de modo que cuando se produce un evento de desplazamiento en el .textContainer, todos los enlaces cambiarán a azul claro. Finalmente, queremos que el color del texto azul claro se oscurezca gradualmente a medida que se desplaza sobre él.
Tenga en cuenta que hay una gran diferencia entre .textContainer: hover a y .textContainer a: hover. El primero afecta el color del enlace cuando el mouse ingresa a cualquier lugar de la división y el segundo afecta el color del enlace cuando usted solo desplaza los enlaces.
Eso termina nuestro CSS también. Ahora, cuando ingresas a la div con el mouse, el fondo se desvanecerá gradualmente a blanco, el texto se volverá gris oscuro y los enlaces se volverán azul claro. Luego, cuando pasas el ratón sobre un enlace, debería oscurecerse gradualmente.
Conclusión
Espero que este artículo haya generado algunas ideas en tu cabeza para algunas cosas divertidas que hacer con las transiciones de CSS. Hazme saber en los comentarios a continuación qué pensaste del efecto general y cómo lo mejorarías. También asegúrese de compartir cualquier enlace que tenga con otros ejemplos de transición de CSS3.