Modos de fusión

The CSS Podcast - 024: Blend Modes

El duotono es un tratamiento de color popular para la fotografía que hace que una imagen parezca estar compuesta solo por dos colores contrastantes: uno para las luces altas y el otro para las luces bajas. Pero ¿cómo lo haces con CSS?

Con los modos de combinación y otras técnicas que aprendiste, como los filtros y los pseudoelementos, puedes aplicar este efecto a cualquier imagen.

¿Qué es un modo de combinación?

Los modos de combinación se usan con frecuencia en herramientas de diseño, como Photoshop, para crear un efecto de composición mezclando colores de dos o más capas. Si cambias la forma en que se mezclan los colores, puedes lograr efectos visuales realmente interesantes. También puedes usar los modos de combinación como una utilidad, como aislar una imagen que tiene un fondo blanco para que parezca tener un fondo transparente.

Puedes usar la mayoría de los modos de combinación disponibles en una herramienta de diseño con CSS, con las propiedades mix-blend-mode o background-blend-mode. mix-blend-mode aplica la compaginación a un elemento completo y background-blend-mode aplica la compaginación al fondo de un elemento.

Usas background-blend-mode cuando tienes varios fondos en un elemento y quieres que todos se mezclen entre sí.

El mix-blend-mode afecta a todo el elemento, incluidos sus pseudoelementos. Un caso de uso se encuentra en el ejemplo inicial de una imagen en duotono, que tiene capas de color aplicadas al elemento a través de sus pseudoelementos.

Los modos de combinación se dividen en dos categorías: separables y no separables. Un modo de combinación separable considera cada componente de color, como RGB, de forma individual. Un modo de combinación no separable considera todos los componentes de color por igual.

Compatibilidad del navegador

mix-blend-mode

Browser Support

• 41
• 79
• 32
• 8

Source

background-blend-mode

Browser Support

• 35
• 79
• 30
• 8

Source

Modos de combinación separables

Normal

Este es el modo de combinación predeterminado y no cambia nada sobre cómo se combina un elemento con otros.

Multiplicar

El modo de combinación multiply es como apilar varias transparencias una encima de la otra. Los píxeles blancos aparecerán transparentes y los píxeles negros aparecerán negros. Cualquier valor intermedio multiplicará sus valores de luminosidad (luz). Esto significa que las luces se vuelven mucho más claras y las sombras, más oscuras, lo que suele producir un resultado más oscuro.

.my-element {
  mix-blend-mode: multiply;
}

Pantalla

El uso de screen multiplica los valores de luz, un efecto inverso a multiply, y, por lo general, produce un resultado más brillante.

.my-element {
  mix-blend-mode: screen;
}

Superposición

Este modo de combinación (overlay) combina multiply y screen. Los colores oscuros de la base se oscurecen y los colores claros de la base se aclaran. Los colores de gama media, como un 50% de gris, no se ven afectados.

.my-element {
  mix-blend-mode: overlay;
}

Oscurecer

El modo de combinación darken compara la luminosidad del color oscuro de la imagen de origen y la imagen de fondo, y selecciona la más oscura de las dos. Para ello, compara los valores de RGB en lugar de la luminosidad (como lo harían multiply y screen) para cada canal de color. Con darken y lighten, a menudo se crean valores de color nuevos a partir de este proceso de comparación.

.my-element {
  mix-blend-mode: darken;
}

Aclarar

El uso de lighten hace exactamente lo opuesto a darken.

.my-element {
  mix-blend-mode: lighten;
}

Sobreexposición de color

Si usas color-dodge, se aclarará el color de fondo para reflejar el color de origen. Los colores negros puros no se ven afectados por este modo.

.my-element {
  mix-blend-mode: color-dodge;
}

Subexposición de color

El modo de combinación color-burn es muy similar al modo de combinación multiply, pero aumenta el contraste, lo que genera tonos medios más saturados y reduce los reflejos.

.my-element {
  mix-blend-mode: color-burn;
}

Luz dura

El uso de hard-light crea un contraste vívido. Este modo de combinación filtra o multiplica los valores de luminosidad. Si el valor del píxel es más claro que el 50% de gris, la imagen se aclara, como si estuviera filtrada. Si es más oscura, se multiplica.

.my-element {
  mix-blend-mode: hard-light;
}

Luz suave

El modo de combinación soft-light es una versión menos intensa de overlay. Funciona de la misma manera, pero con menos contraste.

.my-element {
  mix-blend-mode: soft-light;
}

Diferencia

Una buena manera de imaginar cómo funciona difference es un poco como funciona un negativo de fotos. El modo de combinación difference toma el valor de diferencia de cada píxel y, luego, invierte los colores claros. Si los valores de color son idénticos, se vuelven negros. Las diferencias en los valores se invertirán.

.my-element {
  mix-blend-mode: difference;
}

Exclusión

El uso de exclusion es muy similar al de difference, pero en lugar de mostrar negro para píxeles idénticos, muestra un 50% de gris, lo que genera un resultado más suave con menos contraste.

.my-element {
  mix-blend-mode: exclusion;
}

Modos de combinación no separables

Puedes pensar en estos modos de combinación como componentes de color HSL. Cada uno toma un valor de componente específico de la capa activa y lo mezcla con otros valores de componentes.

Tono

El modo de combinación hue toma el tono del color de origen y lo aplica a la saturación y luminosidad del color de fondo.

.my-element {
  mix-blend-mode: hue;
}

Saturación

Esto funciona como hue, pero usa saturation como el modo de combinación que aplica la saturación del color de origen al tono y la luminosidad del color de fondo.

.my-element {
  mix-blend-mode: saturation;
}

Color

El modo de combinación color creará un color a partir del tono y la saturación del color de origen y la luminosidad del color del fondo.

.my-element {
  mix-blend-mode: color;
}

Luminosidad

Por último, luminosity es lo inverso de color. Crea un color con la luminosidad del color de origen y el tono y la saturación del color del fondo.

.my-element {
  mix-blend-mode: luminosity;
}

La propiedad isolation

Browser Support

• 41
• 79
• 36
• 8

Source

Si configuras la propiedad isolation para que tenga un valor de isolate, se creará un nuevo contexto de apilamiento, lo que evitará que se combine con una capa de fondo. Como aprendiste en el módulo de índice z, cuando creas un nuevo contexto de apilamiento, esa capa se convierte en la capa base. Esto significa que ya no se aplicarán los modos de combinación a nivel superior, pero los elementos dentro de un elemento con isolation: isolate establecido pueden seguir combinando.

Ten en cuenta que esto no funciona con background-blend-mode porque la propiedad de fondo ya está aislada.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre los modos de combinación

¿Cuáles de las siguientes opciones son modos de combinación de CSS?

Diferencia

🎉

Aclarar

🎉

Aclarar

Vuelve a intentarlo.

Dullen

Vuelve a intentarlo.

Multiplicar

🎉

Superposición

🎉

Si quieres combinar diferentes colores de diferentes maneras, ¿qué estilo de modo de combinación necesitarías?

Separables

Estos modos de combinación incluyen efectos segmentados en el canal de color.

No se puede separar

Vuelve a intentarlo, los elementos no separables no son conscientes del canal de color.