En fondos de diseño web modernos son grandes (tanto literal como figurativamente). Con la llegada de las pantallas HD (y ahora 4K), los diseñadores están creando fondos que ocupan un montón de espacio en pantalla. ¿Por qué? Porque crean un impacto visual increíble y ayudan a contar una historia.

Pero hay mucho más en los fondos que simplemente lanzar una foto o textura en un gran espacio. Una combinación de CSS y el poco ocasional de JavaScript potencia la creación de algunos efectos especiales increíbles.

Exploremos algunas de las formas únicas en que los diseñadores están condimentando fondos. También incluiremos un bolígrafo para cada técnica para que pueda ver exactamente cómo funcionan.

Cambio de color del modo de fusión CSS

Lo que hace que este efecto de fondo sea tan genial es que el elemento fijo en la parte superior parece cambiar de color a medida que el usuario se desplaza. El uso de la propiedad CSS mix-blend-mode permite el cambio de tono, que depende del contenido del fondo.

Animación de desplazamiento

Con reminiscencias de los videojuegos de desplazamiento lateral del pasado, esta técnica presenta dos imágenes distintas, cada una desplazándose en la dirección opuesta. Se hace con la ayuda de CSS transform y algunos JS.

Sesgados

Los fondos sesgados son una de las tendencias más populares en diseño web. Es un efecto increíblemente fácil de implementar en el diseño de impresión y un dolor de cabeza en la web, hasta ahora. Esta solución HTML/CSS pura lo hace pan comido.

Imágenes en movimiento

Usando un poco de CSS bastante simple, este fondo permite una transición suave entre varias imágenes. Hace que sea un deslizador mucho más ligero que el JavaScript tradicional.

Degradado animado

Si no se hace con cuidado, un fondo animado puede distraer de cualquier contenido que se encuentre encima. Este ejemplo de degradado animado es agradable porque es un efecto más sutil. Con JavaScript, puede definir colores degradados para que coincidan con su paleta.

Desenfoque en desplazamiento

Esta técnica podría ser bastante útil para los momentos en que realmente desea que los visitantes se centren en la imagen de fondo (como el encabezado de un artículo de noticias) y luego permitan la lectura fácil del texto por encima. Un poco de jQuery cambia la propiedad background-size al desplazarse para crear el efecto.

Imagen de héroe fundido con superposición

Hay algunas cosas en este ejemplo. En primer lugar, una imagen de héroe de ancho completo tiene una superposición de colores añadida en la parte superior para crear un tono diferente. A continuación, se implementa una animación de fundido para introducir la imagen de una manera visualmente suave. Por último, se agrega un efecto de desplazamiento de estilo paralaje a la mezcla. El resultado es un aspecto muy moderno que utiliza relativamente poco código (y no JS).

Zoom de fondo y panorámica

Este es un efecto que estamos viendo bastante últimamente. A medida que el usuario pasa el cursor sobre un panel, la imagen de fondo se acerca y se desplaza junto con cualquier movimiento del cursor. Es una manera fácil de agregar algo de interactividad y mantener el interés del usuario.

Revelar al pasar el ratón

Este ejemplo muestra una pantalla dividida en la que el fondo se revela en función de la posición del ratón del usuario. Ideal para comparaciones, como tomas de «antes» y «después».

Cambio de color en el desplazamiento

A veces olvidamos lo poderoso que puede ser el uso de colores sólidos simples. Aquí, vemos el impacto que puede tener a medida que los colores de fondo cambian en función de la posición del desplazamiento. Esta solución ligera puede ser tan efectiva visualmente como imágenes pesadas.

Los fondos a la vanguardia

Los fondos ya no son solo un medio para enmarcar el contenido, ahora a menudo son parte del contenido en sí. Con tantas formas interesantes de utilizarlas, vale la pena experimentar con varias técnicas de fondo y ver cómo pueden mejorar la experiencia del usuario de su próximo proyecto.