Modos de fusión

Podcast de CSS - 024: Modos de combinación

Duotone es un tratamiento de color popular para la fotografía. lo que hace que una imagen parezca compuesta solo por dos colores que contrastan: uno para zonas brillantes y la otra para poca luz. Sin embargo, ¿cómo se hace esto con CSS?

Los modos de fusión y otras técnicas que has aprendido como los filtros y seudoelementos: puedes aplicar este efecto a cualquier imagen.

¿Qué es un modo de fusión?

Los modos de fusión se usan comúnmente en herramientas de diseño como Photoshop para crear un efecto de composición combinando colores de dos o más capas. Al cambiar la mezcla de colores, puedes lograr efectos visuales realmente interesantes. También puedes utilizar 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 utilizar la mayoría de los modos de combinación disponibles en una herramienta de diseño con CSS, con el mix-blend-mode o background-blend-mode. El elemento mix-blend-mode aplica la combinación a un elemento completo. y background-blend-mode aplica la combinación con el fondo de un elemento.

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

mix-blend-mode afecta a todo el elemento. incluidos sus seudoelementos. Un caso de uso es el ejemplo inicial de una imagen de dos tonos que tiene capas de color aplicadas al elemento a través de sus seudoelementos.

Los modos de fusió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

Navegadores compatibles

• (41)
• (79)
• (32)
• (8)

Origen

background-blend-mode

Navegadores compatibles

• (35)
• (79)
• (30)
• (8)

Origen

Modos de combinación separables

Normal

Este es el modo de combinación predeterminado y no cambia nada en la forma en que un elemento se combina 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 en negro. Cualquier elemento intermedio multiplicará sus valores de luminosidad (luz). Esto significa que las luces se vuelven mucho más claras y oscuras, más oscura, lo que suele producir un resultado más oscuro.

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

Pantalla

El uso de screen multiplica los valores de light, un efecto inverso a multiply, y el resultado será mejor.

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

Superposición

Este modo de fusión, overlay, combina multiply y screen. Los colores oscuro base se vuelven más oscuros y los colores claros base se vuelven más claros. Los colores de gama media, como el gris al 50%, no se ven afectados.

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

Oscurecer

El modo de fusión darken compara la luminosidad de color oscuro de la imagen de origen y de fondo y selecciona el más oscuro de los dos. Para ello, compara valores de rgb en lugar de luminosidad (como harían multiply y screen). para cada canal de color. Con darken y lighten, se suelen crear nuevos valores de color a partir de este proceso de comparación.

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

Lighten

Si usas lighten, se hace exactamente lo opuesto a darken.

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

Sobreexposición de color

Si usas color-dodge, aclara el color de fondo para reflejar el color de origen. Los colores negros puros no tienen ningún efecto en este modo.

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

Quema 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 menos zonas brillantes.

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

Luz fuerte

El uso de hard-light crea un contraste vívido. Este modo de fusión filtra las pantallas o multiplica los valores de luminosidad. Si el valor del píxel es más claro que el gris al 50%, la imagen se aclara, como si fuera analizado. Si está más oscuro, se multiplica.

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

Luz suave

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

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

Diferencia

Una buena manera de ilustrar el funcionamiento de difference es similar al funcionamiento de una foto negativa. El modo de combinación difference toma el valor de la diferencia de cada píxel. invirtiendo los colores de las luces. 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

Usar exclusion es muy similar a difference, pero en lugar de mostrar el color negro para píxeles idénticos, tendrá un gris 50%, lo que dará como resultado una salida 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 color de HSL. Cada uno toma un valor de componente específico de la capa activa y lo mezcla con otros valores de componente.

Tono

El modo de combinación hue toma el matiz 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, cuando usas saturation como modo de combinación, se aplica la saturación del color de origen. al matiz 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 matiz y la saturación del color de origen. y la luminosidad del color de fondo.

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

Luminosidad

Por último, luminosity es lo contrario a color. Crea un color con la luminosidad del color de origen, así como el matiz y la saturación del color de fondo.

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

La propiedad isolation

Navegadores compatibles

• (41)
• (79)
• (36)
• (8)

Origen

Si estableces isolation tenga un valor de isolate, creará un nuevo contexto de apilado, lo que evitará que se mezcle con la capa de fondo. Como aprendiste en el módulo del índice z, cuando creas un nuevo contexto de pila, esa capa se convierte en la capa base. Esto significa que ya no se aplicarán los modos de combinación de nivel superior, pero los elementos dentro de un elemento con el isolation: isolate establecido aún pueden combinarse.

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

Verifica tus conocimientos

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

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

Diferencia

🎉

Lighten

🎉

Aclarar

Vuelve a intentarlo.

Dullen

Vuelve a intentarlo.

Multiplicar

🎉

Superposición

🎉

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

Separables

Estos modos de combinación incluyen efectos específicos según el canal de color

No separable

Vuelve a intentarlo; los elementos no separables no reconocen el canal de color