Cómo usar los modos de fusión CSS

Los modos de fusión CSS son una manera fácil de agregar efectos de imagen directamente dentro de su navegador.

Debido a esto, la forma tradicional de editar y luego guardar fotos desde una solución de software de edición de imágenes no siempre es necesaria. Como diseñadores, hemos pasado incontables horas agregando efectos a las imágenes con herramientas como Adobe Photoshop. A medida que avanza en este tutorial, notará que muchas de las opciones se parecen a las de Photoshop, pero ahora se pueden hacer con la eficiencia del estilo CSS.

¿Los modos de combinación del navegador eliminarán por completo la necesidad de un software de edición de imágenes? No del todo, y ciertamente no del todo todavía. Pero la compatibilidad con CSS y el navegador ha recorrido un largo camino para admitir nuevas formas de editar imágenes. El recorte y el enmascaramiento de CSS y SVG, los modos de fusión, la transformación 3D y más ciertamente pueden reducir la dependencia que tenemos del software de edición de imágenes. A medida que los navegadores se vuelvan más sofisticados, veremos mucho más potencial y (con suerte) pasaremos menos tiempo en Photoshop.

Modos de fusión de CSS y modos de fusión de mezcla de CSS

Este tutorial cubrirá los modos de fusión de CSS y cómo se usan. Para empezar, hay un par de opciones diferentes que debe tener en cuenta. Uno es un efecto con background-blend-mode y el otro es con mix-blend-mode .

Usando la background-blend-mode property , puede mezclar las capas de fondo (imagen o color) de un elemento. Los modos de fusión se definen como un valor y especifican cómo fusionar o mezclar los colores de la imagen de fondo con el color u otras imágenes de fondo detrás de ella.

¿Qué pasa si quieres hacer algo de fusión pero no con elementos de fondo? Los elementos se pueden mezclar usando la propiedad mix-blend-mode . Esta propiedad describe cómo debe ser la combinación entre elementos HTML apilados. Los elementos de las capas superpuestas se combinarán con los que están debajo. Esta propiedad influirá en cualquier imagen, texto, borde o encabezado.

Ejemplo de multiplicación de Adobe Photoshop

Echar un vistazo a la forma tradicional de mostrar los modos de fusión en un editor de imágenes nos da una idea de lo que podemos lograr con los modos de fusión CSS. La siguiente foto fue creada en Adobe Photoshop. La imagen está en su propia capa de fondo con una capa roja arriba. Se seleccionó un modo de fusión para la capa roja, que es "Multiplicar". Como puede ver, hay una superposición roja. Para lograr este efecto, Adobe Photoshop toma los colores de la capa a la que se le ha aplicado "Multiplicar", los multiplica por los colores de la(s) capa(s) debajo y luego los divide por 255 para mostrar el resultado.

Este mismo efecto se puede lograr con CSS, lo que permite una personalización más rápida y una actualización sencilla.

Ejemplo básico de un modo de fusión CSS

Un ejemplo simple para ver cómo funcionan los modos de fusión es fusionar la imagen con un background-color . Primero, se debe declarar la ruta URL a la imagen, luego se debe especificar un color. Una vez que se han decidido, se debe elegir el modo de fusión. Aquí se seleccionó Multiplicar para mostrar cómo este modo de fusión afecta la apariencia de la background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Un modo de fusión es la forma en que se calcula el valor de color final de un píxel cuando las capas se superponen. Cada modo de fusión toma el valor de color del primer plano y el fondo (color superior e inferior), calcula su valor y devuelve un valor de color. La capa visible final es el resultado del cálculo del modo de fusión en cada píxel superpuesto entre las capas fusionadas.

Multiplicar es un modo de fusión muy popular, pero también hay otras opciones de modo de fusión disponibles: pantalla, superposición, oscurecer, aclarar, sobreexponer color, subexponer color, luz fuerte, luz suave, diferencia, exclusión, matiz, saturación, color y luminosidad. Si se especifica "normal", esto restablecerá las cosas. En lugar de revisar los detalles de cada modo de combinación uno por uno, experimentar con ellos es la mejor manera de determinar cuál será el resultado final.

Modo de fusión de fondo con dos imágenes

En lugar de tener una superposición de color en una imagen, superponer dos imágenes juntas puede tener un efecto muy bueno. Es tan fácil como agregar dos imágenes de fondo en la declaración CSS. La siguiente opción es tener un color de fondo (o no). Si no desea un color de fondo, puede eliminarlo y las imágenes se fusionarán según el modo de fusión que elija.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Gradiente en modos de fusión de fondo

En lugar de usar un solo color, los degradados también pueden dar algunos efectos únicos.

 .gradiente-en-imagen {
 fondo:
 gradiente lineal (púrpura 0%, rojo 80%),
 degradado lineal (a la derecha, morado 0 %, amarillo 100 %), url ("imagen.jpg");
 background-blend-mode: screen, difference, lighten;
 } 

También notará que este ejemplo tiene varios modos de combinación de fondo. Si un modo de fusión no es suficiente, se pueden usar varios.

Se pueden encontrar ejemplos de trabajo en este Codepen.

Ejemplos de modo de mezcla de mezcla

Hasta este punto, el foco ha estado en el fondo. ¿Qué pasa si otros elementos de la página quieren aprovechar los modos de fusión? Esto no es problema y los mismos tipos de modo de mezcla están disponibles.

Las cosas se ven iguales desde background-blend-modes con la excepción de initial, heritage y unset.

• Inicial: configuración predeterminada de la propiedad que no establece un modo de fusión.
• Heredar: hereda el modo de fusión de su elemento principal.
• Desactivar: elimina el modo de fusión de un elemento.

Ejemplo básico de un modo de fusión mixto con aislamiento

Cuando trabaje con mix-blend-mode , se encontrará con la necesidad de aislar un poco. En primer lugar, es importante saber que es posible "apilar", y esto es valioso cuando se trabaja con muchas capas. Piense en una pila de cajas. Cada caja está separada del grupo. Dentro de cada caja, puede haber varias capas de elementos. Esta forma de pensar ayudará a determinar qué debe aislarse.

Mezcla de texto e imagen con modo de mezcla

En este ejemplo, el div con una clase de img-wrap contiene la imagen. La imagen tiene un mix-blend-mode de multiplicación. Básicamente, la imagen parece caer en el fondo.

Para evitar esto, el div img-wrap (que también contiene el texto del encabezado) debe ser un nuevo conjunto de contenido apilado para que se separe del fondo del elemento del cuerpo. Esto se hace con la propiedad de aislamiento. El valor predeterminado es automático, por lo que isolation: isolate; será necesario agregar.

Para probar esto, comente la propiedad de aislamiento en el div con la clase de .img-wrap y verifique el resultado.

Aquí está el HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Aquí está el CSS. Preste mucha atención al isolate en el .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

El ejemplo de trabajo se puede encontrar en Codepen.

Recorte de texto con modo mixto

Se pueden crear algunos efectos de tipo interesantes con los modos de mezcla de mezcla. Hay una manera fácil de hacer texto recortado. El fondo está oculto por un relleno en el elemento h1 .

Aquí está el HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

El que contiene <div> se rellena con la imagen de fondo del bosque.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

El encabezado dentro tiene un estilo con un color de fondo opcional. El encabezado tiene un efecto transparente con la imagen de fondo semitransparente al usar mix-blend-mode de multiplicación:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

El ejemplo de trabajo se puede encontrar en Codepen.

Modo de mezcla y SVG

Los archivos SVG son muy populares en la web y los modos de fusión CSS también funcionan bien con ellos. Las formas se pueden orientar fácilmente para darles el modo de fusión deseado.

El aislamiento también fue clave en este ejemplo. Sin aislar los círculos, el fondo gris interferiría.

Aquí está el código para crear el grupo del círculo:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Aquí están los estilos CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Este ejemplo se puede encontrar en Codepen.

Soporte de navegador para modo de mezcla de fondo y modo de mezcla

El soporte del navegador es bastante bueno, pero no del todo consistente para el modo de combinación de fondo. Antes de comenzar con un diseño utilizando esta función, asegúrese de verificar ¿Puedo usar? Actualmente, Edge y Safari carecen de soporte. Para lidiar con el soporte limitado y dependiendo de los navegadores que deban ser compatibles, una consulta de características CSS puede ser una buena opción. De lo contrario, pensar en las imágenes "combinadas" como una mejora (no un requisito) puede ser su mejor opción.

El soporte del navegador es un poco mejor para el modo mixto. Es bueno estar al tanto del apoyo parcial. Por ejemplo, Safari no es compatible con el tono, la saturación, el color o la luminosidad.

La mejor manera de aprender realmente sobre lo que se puede diseñar con los modos de fusión es experimentar. Los ejemplos que se muestran aquí solo han arañado la superficie. Es increíble el tipo de gráficos que se pueden crear usando los modos de fusión. Este es un gran paso adelante para lo que se puede hacer en la web.

Impulse la libertad de crear con WP Engine

WP Engine potencia la libertad de crear en WordPress. Los productos de la empresa, los más rápidos entre todos los proveedores de WordPress, potencian 1,5 millones de experiencias digitales. Más de los 200 000 sitios principales del mundo usan WP Engine para potenciar sus experiencias digitales que nadie en WordPress. ¡Encuentre más en wpengine.com o hable con un representante hoy!