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
background-blend-mode
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
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?
Si quisieras combinar diferentes colores de diferentes maneras, ¿qué estilo de modo de fusión necesitarías?