El podcast de CSS 024: Blend Modes
Duotone es un tratamiento de color popular para fotografía que hace que una imagen parezca que solo está formada por dos colores contrastantes: uno para zonas brillantes y otro para las zonas con poca luz. ¿Cómo lo hacemos 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 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. Cambiar la mezcla de colores te permite lograr efectos visuales muy interesantes. También puedes usar modos de combinación como utilidad, como aislar una imagen que tiene un fondo blanco, para que parezca que tiene 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 práctico se da en el ejemplo inicial de una imagen en 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
background-blend-mode
Modos de combinación separables
Normal
Este es el modo de fusión predeterminado y no cambia nada sobre cómo 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 parecerá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 y 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 suele 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 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 combinación darken compara la luminosidad del color oscuro de la imagen de origen y de fondo y selecciona el más oscuro.
Para ello, se comparan 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;
}
Sobreexposición de color
Si usas color-dodge, se aclara el color de fondo para reflejar el color de origen.
Los colores negro puro no generan ningún efecto con este modo.
.my-element {
mix-blend-mode: color-dodge;
}
Quemado 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 reflejos más bajos.
.my-element {
mix-blend-mode: color-burn;
}
Luz fuerte
Si usas hard-light, se crea un contraste intenso.
Este modo de fusión filtra o multiplica los valores de luminosidad.
Si el valor de píxeles es más claro que un gris del 50%, la imagen se aclara, como si estuviera filtrada. 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 severa de overlay.
Funciona prácticamente de la misma manera 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 negativo de foto.
El modo de combinación difference toma el valor de la 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, mostrará un 50% de gris, lo que da como resultado 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 de HSL. Cada uno toma un valor de componente específico de la capa activa y lo combina con otros valores de componente.
Hue
El modo de combinación hue toma el tono del color de origen y lo aplica a la saturación y la 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 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 y el matiz y la saturación del color de fondo.
.my-element {
mix-blend-mode: luminosity;
}
La propiedad isolation
Si configuras la propiedad isolation para que tenga un valor de 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 los modos de combinación a nivel superior ya no se aplicarán, 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 mixtos
¿Cuáles de las siguientes opciones son modos de combinación de CSS?
Si quieres combinar diferentes colores de diferentes maneras, ¿qué estilo de modo de combinación necesitas?