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:
