Fitichely: Transiciones y transformaciones con estilos CSS

Fitichely: Transiciones y transformaciones con estilos CSS

Recientemente migramos la web de Fitichely Serveis Culturals de Wordpress a nuestro servicio de gestión de contenidos web Ska!CMS. Desarrollamos el tema visual responsive basado en Bootstrap, manteniéndonos fieles a la imagen original. Para aligerar la carga intentamos usar la mayor cantidad de estilos puramente CSS en lugar de Javascript. En este artículo explicamos brevemente algunas de las técnicas CSS para crear efectos visuales atractivos que hemos utilizado.

Qué son las transiciones y transformaciones CSS

Las CSS3 Transitions (transiciones CSS) son efectos que producen cambios en las propiedades de los estilos aplicados en nuestas hojas de estilo. Se suelen usar, por ejemplo, para que un efecto en la propiedad :hover (que un enlace cambie de color al pasar el ratón por encima) suceda suavemente y a lo largo de un tiempo determinado en lugar de suceder instantáneamente, que es el comportamiento por defecto.

Las CSS3 Transforms (transformaciones CSS) son propiedades que definen cómo los elementos pueden transformarse en el espacio bidimensional o tridimensional. Estos efectos pueden ser rotar, cambiar de escala, moverse...

Así pues, las transiciones definen cómo ha de aplicarse una transformación sobre una determinada propiedad definida en los estilos.

En este artículo veremos cómo hemos conseguido que en la sección Trabajos de la web de nuestro cliente, las imágenes, al pasar por encima de ellas, giren y escalen de forma progresiva.

Cómo funcionan las transiciones

Las transiciones permiten especificar:

  • transition-property: la propiedad CSS sobre la que actuar,
  • transition-duration: la duración del efecto,
  • transition-timing-function: especifica como cambia el ritmo de la transición a lo largo de su duración,
  • transition-delay: especifica el retraso con el que queremos que empiece la transición.

En nuestro caso vamos a aplicar esta transición:

  • transition-property: all ('all' significa que aplicamos a todas las propiedades css que aceptan transiciones)
  • transition-duration: 1s ('s' en segundos o 'ms' en milisegundos)
  • transition-timing-function: ease-in-out (hay 5 opciones con diferentes parámetros en una función con 4 puntos de control)
  • transition-delay: 0s (significa que no tiene retraso y actua inmediatamente)

Podemos definir todos los parámetros de una sola vez de la siguiente manera:

transition = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

En nuestro ejemplo sería:

transition: all 1s ease-in-out 0s;

El soporte de los diferentes navegadores es desigual. Por eso tendremos que repetir la propiedad pensando en cada uno de ellos:

  • -webkit-transition: para los navegadores Safari 3.2, Chrome 4.0 en adelante y Opera 15.0
  • -moz-transition: para el navegador Firefox 4.0 en adelante
  • -o-transition: para el navegador Opera 10.5
  • -ms-transition: para el navegador IE9

La mejor manera de saber si nuestras transformaciones funcionarán o no en la mayoría de navegadores o si debemos usar las extensiones propietarias es consultando en el sitio web: http://caniuse.com/

Para más información sobre las transiciones: An Introduction to CSS3 Transitions

Transformaciones 2D: rotar y escalar

Hay multitud de transformaciones que se pueden aplicar tanto en dos dimensiones como en tres. El objetivo de este artículo es ilustrar alguna de las más habituales y como las hemos usado en un caso real. Si quieres saber más puedes consultar el tutorial CSS3 Transitions and Transforms From Scratch.

Para entender el movimiento usaremos como referencia un eje de coordenadas x / y:

La diferencia fundamental es que el eje -y está por encima del eje x, en lugar de por debajo. ¿Por qué? HTML y CSS usan un sistema invertido de coordenadas cartesianas porque las páginas web empiezan arriba a la izquierda y se leen hacia abajo.

En la imagen vemos cómo se definiría una transformación de movimiento: transform: translate(x,y) donde x e y son las coordenadas que determinan la dirección en la que se debe desplazar el elemento.

Rotación. El movimiento de rotación se define usando una coordenada radial de 0º a 360º de la siguiente manera transform: rotate(ndeg) donde n es el ángulo de rotación.

Los valores positivos van en el sentido de las agujas del reloj y los negativos en sentido contrario.

Escalado. Para escalar un elemento podemos aplicar la transformación a los 2 ejes a la vez transform: scale(n) donde n define la proporción a escalar, o en diferentes proporciones para cada eje con transform: scale(x,y). Valores positivos agrandan el elemento en proporción a la dimensión inicial, y valores negativos lo reducen.

En nuestro ejemplo queremos que la rotación sea pequeña y hacia la izquerda, o sea, en el sentido contrario a las agujas del reloj. Para eso definimos la siguiente propiedad transform:rotate(-10deg);

El escalado también queremos que sea para agrandar el objeto proporcionalmente de forma sutil, pongamos un 20% más sobre su tamaño inicial. Para eso definimos transform:scale(1.2);

Como en el caso de las propiedades de las transiciones, también podemos encadenar diferentes transformaciones:

transform:rotate(-10deg) scale(1.2);

Como en el caso anterior, para asegurarnos el correcto soporte por parte de los diferentes navegadores usaremos los prefijos correspondientes:

transform:rotate(-10deg) scale(1.2);
-webkit-transform:rotate(-10deg) scale(1.2);
-moz-transform:rotate(-10deg) scale(1.2);
-o-transform:rotate(-10deg) scale(1.2);
-ms-transform:rotate(-10deg) scale(1.2);

Transiciones y transformaciones en acción

Ahora que sabemos como funcionan las transiciones y que sabemos qué transformaciones aplicar veremos cómo usarlas.

Nuestro objetivo es que, en el listado de trabajos, al pasar por encima de la imagen destacada, ésta gire y escale de forma progresiva para resaltar el efecto de :hover y que se puede pinchar en ella para obtener más información del trabajo.

Nuestro código HTML de ejemplo:

<div class="thumbnail">
    <img src="" class="thumbnail-img"/>
</div>

Nuestro CSS:

.thumbnail-img {
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    -ms-transition: all 1s ease-in-out 0s;
}

.thumbnail-img:hover {
    transform:rotate(-10deg) scale(1.2);
    -webkit-transform:rotate(-10deg) scale(1.2);
    -moz-transform:rotate(-10deg) scale(1.2);
    -o-transform:rotate(-10deg) scale(1.2);
    -ms-transform:rotate(-10deg) scale(1.2);
}

El resultado:



Para la elaboración de este artículo se han consultado los siguientes recursos:



Historias relacionadas

Integración de MailChimp y Prestashop para Agua de Coco

Integración de MailChimp y Prestashop para Agua de Coco

Agua de Coco es una fundación dedicada a la cooperación internacional. Su tienda online solidaria estaba funcionando sobre Prestashop 1.7 con múltiples errores al haber sido actualizado desde la versión 1.5 directamente. Después de revisar y solucionar los errores de la actualización, ajustamos los estilos del tema por defecto e instalamos una serie ...

Si no tiene API, lo hacemos: una solución para usuarios de CDMON

Si no tiene API, lo hacemos: una solución para usuarios de CDMON

“Tener” un dominio consiste en realidad en 2 gestiones independientes:

  • Registrar el dominio, que puede ser la entidad registradora X,
  • Gestionar los registros y parámetros del dominio, servicio que puedes realizar en la misma entidad X o con la entidad Y.

Hace unos 10 años que somos clientes de CDMON registrando y gestionando nuestros dominios ...

Los nuevos retos del uso del correo electrónico en organizaciones

Los nuevos retos del uso del correo electrónico en organizaciones

Recientemente colaboramos en la migración de la web y el correo de la Federación Regional de Asociaciones de Vecinos de Madrid (FRAVM) junto con Freepress S.Coop.Mad que han hecho un excelente trabajo con el diseño y arquitectura web. Por nuestra parte estamos optimizando el alojamiento web, para mejorar el cacheado y la velocidad ...

Solicítanos información

 Tel: (+34) 983 070 900

    Envía un correo