El diseño receptivo está en todas partes, y ya sea que esté usando un marco de trabajo o escribiendo sus propias consultas, algunos elementos en su página se moverán o escalarán.
Si sus consultas de medios se basan en las dimensiones del navegador y el tamaño del navegador cambia, sus elementos saltarán a su lugar. Agregar una pequeña animación a esas propiedades es un buen toque para cualquier sitio receptivo.
Hoy, les mostraré lo fácil que es agregar ese toque adicional, animando el ancho y la opacidad de los elementos entre las consultas de los medios.
Para este simple ejemplo usaremos un div, que contiene 3 divs más pequeños. Los divs se escalarán según el tamaño de la ventana del navegador. El HTML es simple:
Ahora, nuestro CSS principal colocará los tres cuadros dentro del div principal y también, en línea con un margen a la derecha:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Este es nuestro diseño principal, sin consultas de medios, este diseño no se adaptará si la ventana gráfica cambia. Ahora que tenemos los conceptos básicos en su lugar, agreguemos las consultas de medios.
Las consultas de los medios se utilizan con frecuencia hoy en día. La mayoría de los diseñadores web los entienden, pero en caso de que sea la primera vez, aquí hay un repaso rápido: las consultas de medios comprueban la capacidad del dispositivo que está utilizando (ancho, orientación y resolución) y ejecutan CSS específicos si las condiciones especificadas para los medios consulta se cumplen. En nuestro ejemplo, utilizaremos dos consultas de medios que verificará si el navegador es más pequeño que 960px, y si es más pequeño que 660px. A continuación, estableceremos el ancho de los elementos en consecuencia, también ocultaremos el último div hijo para que los otros dos tengan más espacio:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Eso es todo lo que necesitamos para nuestras consultas de medios. Tenga en cuenta que es importante que este código se coloque debajo del código CSS original anterior para que las consultas de medios sobrescriban el código que está sobre ellos. Si prueba su archivo ahora, verá que el tamaño de los divs cambia y la opacidad del último elemento secundario cambia cuando cambia el tamaño de la ventana del navegador.
Notarás que para ocultar el último div infantil estamos configurando su opacidad a 0 en lugar de configurarlo para mostrar: ninguno. Eso es porque queremos ser capaces de animar la propiedad; la opacidad tiene muchos grados diferentes, mientras que la visualización es verdadera o falsa (y, por lo tanto, no puede ser animada).
Las animaciones CSS han demostrado ser muy prácticas cuando realizamos estas pequeñas animaciones que solíamos ejecutar en jQuery, como animar el color, el ancho y la opacidad.
Como queremos que la página se anime como un todo, utilizamos el selector * CSS y configuramos nuestra animación. Las animaciones CSS se degradan con elegancia, pero también querrás agregar los prefijos del vendedor para que haya tanto soporte como sea posible:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Puedes ver el resultado final aquí.
Agregar animaciones simples como estas, es un buen toque final para cualquier sitio web. Algunas líneas de código agregan un brillo muy agradable a su sitio receptivo.
¿Has animado consultas de medios en un proyecto? ¿Qué efectos has logrado? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de escala a través de Shutterstock.