Bye bye Photoshop, bienvenido CSS: Fusiona tus fondos con estos 10 Background Blends

Si utilizas Photoshop o Illustrator estarás familiarizado con los Modos de Mezcla o Blend Modes. Esta herramienta toma dos pixeles y los encima, uno sobre otro, para combinarlos en diferentes maneras. Oscurecer (Darken), Multiplicar (Multiply), Aclarar (Lighten), Trama (Screen) por nombrar algunos modos pueden convertir una fotografía en una obra de arte digital.

Si es que es verdad que Photoshop no inventó los modos de mezcla, su implementación es la más copiada. Pero ahora no necesitas Photoshop para darle estilo a tus fondos o backgrounds, porque ya lo puedes hacer solo con css3.

Soporte para Navegadores

Aunque el soporte de background-blend-mode está avanzando para la mayoría de los navegadores, por ahora ni Opera Mini e Internet Explorer, en ninguna de sus versiones, ofrece soporte. Puedes ver la tabla de soporte para navegadores en aquí en Can I use.

Captura de pantalla 2015-03-06 a las 1.26.29

Cómo usar el background-blend-mode

Para este ejemplo, he tomado la fotografía de un Pug con mucho estilo. Bien, ahora, lo primero que hay que definir es el contenedor o div que tendrá el fondo o background.

Para este ejemplo, a este div le he puesto dos clases, una “perro-animado” y otra “multiply”. La primera define el estilo del div, es decir, el ancho, alto, display, etc. La segunda clase define el tipo de background-blend-mode.

Como vemos la clase .perro-animado le da estilo general al bloque div. Es decir, forma el ancho, la altura y le coloca la imagen al fondo.

Luego, en la clase “multiply”, he puesto el estilo para que haga el background-blend-mode “multiply”.

Y estos son los resultados:

 

10 ejemplos de aplicación de Background Blends

Multiply (Multiplicar)

Screen (Trama)

Overlay (Superponer)

Darken (Oscurecer)

Lighten (Aclarar)

Color Dodge (Sobreexponer Color)

Hard Light (Luz Fuerte)

Difference (Diferencia)

Exclusion (Exclusión)

Luminosity (Luminosidad)

Inspecciona el código en CodePen

1

Velo en CodePen

Recent Posts

Leave a Comment