El podcast de CSS, 024: Blend Modes
Duotone es un tratamiento de color popular para fotografía que hace que parezca que una imagen solo está formada por dos colores contrastantes: uno para zonas brillantes y otro para poca luz. ¿Cómo lo hacemos con CSS?
Mediante 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 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 mediante la combinación de colores de dos o más capas. Cambiar la combinación de los colores permite lograr efectos visuales muy interesantes. También puedes usar los modos de combinación como 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, mediante las propiedades mix-blend-mode o background-blend-mode.
El mix-blend-mode aplica la combinación a un elemento completo, y el background-blend-mode aplica la combinación al fondo de un elemento.
Usas background-blend-mode cuando tienes varios fondos en un elemento y quieres que todos se combinen entre sí.
mix-blend-mode afecta a todo el elemento, incluidos sus seudoelementos.
Un caso de uso se encuentra en el ejemplo inicial de una imagen en dos tonos, que tiene capas de color aplicadas al elemento a través de sus pseudoelementos.
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
background-blend-mode
Modos de fusión separables
Normal
Este es el modo de fusión predeterminado y no cambia nada sobre la manera 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 se verán transparentes
y los negros, negros.
Cualquier valor intermedio multiplicará sus valores de luminosidad (luz).
Esto significa que las luces se vuelven mucho más claras, oscuras o 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, con mayor frecuencia, producirá un resultado más brillante.
.my-element {
mix-blend-mode: screen;
}
Superposición
Este modo de fusión (overlay) combina multiply y screen.
Los colores oscuros base se vuelven más oscuros y los claros base se aclaran.
Los colores de gama media, como el gris 50%, 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 de fondo y selecciona el más oscuro de ambas.
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, se suelen crear nuevos valores de color a partir de este proceso de comparación.
.my-element {
mix-blend-mode: darken;
}
Aclarar
Usar lighten hace exactamente lo opuesto a darken.
.my-element {
mix-blend-mode: lighten;
}
Esquivar color
Si usas color-dodge, se aclara el color de fondo para reflejar el color de origen.
Los colores negro puro no ven ningún efecto en este modo.
.my-element {
mix-blend-mode: color-dodge;
}
Efecto 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 reflejos.
.my-element {
mix-blend-mode: color-burn;
}
Luz fuerte
Si usas hard-light, se creará un contraste intenso.
Este modo de combinación filtra o multiplica los valores de luminosidad.
Si el valor de píxeles es más claro que el gris un 50%, la imagen se aclara, como si se hubiera aplicado a un filtro. Si es 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 intensa de overlay.
Funciona de la misma forma, con menos contraste.
.my-element {
mix-blend-mode: soft-light;
}
Diferencia
Una buena manera de imaginar cómo funciona difference es similar al funcionamiento de un elemento negativo de foto.
El modo de combinación difference toma el valor de diferencia de cada píxel, lo que invierte los colores de la luz.
Si los valores de color son idénticos, se vuelven negros.
Se invertirán las diferencias en los valores.
.my-element {
mix-blend-mode: difference;
}
Exclusión
El uso de exclusion es muy similar a difference, pero, en lugar de mostrar negro para píxeles idénticos, se mostrará un 50% de gris, lo que generará un resultado más suave con menos contraste.
.my-element {
mix-blend-mode: exclusion;
}
Modos de fusió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 componentes.
Hue
El modo de combinación hue toma el tono del color de origen y lo aplica a la saturación y luminosidad del color del fondo.
.my-element {
mix-blend-mode: hue;
}
Saturación
Esto funciona como hue, pero si usas saturation como modo de combinación, se 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 contrario a color.
Crea un color con la luminosidad del color de origen y el matiz y la saturación del color del fondo.
.my-element {
mix-blend-mode: luminosity;
}
La propiedad isolation
Si configuras la propiedad isolation para que tenga un valor isolate, se creará un nuevo contexto de apilado, lo que impedirá que se combine con una capa de fondo.
Como aprendiste en el módulo de índice z, cuando creas un nuevo contexto de apilado, 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 isolation: isolate establecido pueden aún combinarse.
Ten en cuenta que esto no funciona con background-blend-mode porque la propiedad en segundo plano ya está aislada.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los modos de combinación
¿Cuáles de las siguientes opciones son modos de combinación de CSS?
Si quisieras combinar diferentes colores de diferentes maneras, ¿qué estilo de modo de combinación necesitarías?