Modos de Fusión en CSS: Teoría del Color y Aplicación Práctica
Podría estar ya familiarizado con los "modos de fusión" si eres un usuario de Photoshop; estos, permiten combinar capas de diferentes maneras y es realmente divertido jugar con ellas. Los modos de fusión en CSS, sin embargo, no son compatibles de forma universal, aunque sin duda llegarán a serlo.
En este tutorial vamos a aprender cómo funcionan los modos de fusión y las distintas formas en que se pueden implementar usando los modos de fusión CSS.
Conceptos Básicos de las Fusiones
Si nunca te has topado con modos de fusión, la forma en la que funcionan te podría parecer un poco difícil. Vamos a verlo por partes.
¿Qué significan realmente los "modos de fusión"?
Los modos de fusión están disponibles en el software de diseño desde hace años, pero el concepto de los modos de fusión ha estado realmente en uso durante mucho más tiempo, incluso antes de que se inventasen las computadoras.
La parte "fusión" en los modos de fusión se refiere a coger dos colores y combinarlos de alguna manera para obtener un tercer color. Exactamente, tomamos dos mapas de píxeles y los mezclamos juntos.
La forma en la que se lleva a cabo esa fusión se corresponde con el "modo" de los modos de fusión. ¿Cómo interactúan los colores? Como estamos trabajando en un entorno digital, podemos coger cualquier fórmula matemática y aplicarla a las dos entradas para obtener una salida.
Realizar las Operaciones Matemáticas
Si eres realmente ambicioso, echa un vistazo al documento oficial de composición del grupo W3C FX Task Force que explica las matemáticas puestas en práctica para conseguir cada uno de los distintos modos de fusión. En él se demuestra la fórmula utilizada para calcular la mezcla.
Cm = B (Cb, Cs)
- Aquí,
Cmes el color resultante después de fusionar. Bse refiere a la función de mezcla.- La variable
Cbes el color de fondo. - Y la variable de
Cses el color de origen.
Todos los colores se basan en una escala 0-1, que se asigna directamente a un valor rgb 0-255.
Existen dos categorías en los modos de fusión. Las primeros se consideran "inseparables", y la segundas (como era de esperar) se consideran "separables" o independientes. Si un modo de fusión se considera separable o no está determinada por el algoritmo subyacente. Si el algoritmo trata a cada uno de los canales de color de forma independiente (rojo, verde y azul) por igual, se considera inseparable. Si usa cada uno de los canales de color de forma individual, se considera separables.
Todos los modos de fusión sólo devuelven colores que están dentro del rango de 0 a 255. Todo lo que este fuera de rango sea en la dirección que sea, será ajustado a la gama. Cuando ves grandes áreas de blanco o negro en una zona de fusión, probable sea porque en esas zonas se ha recortado la gama.
Tipos de Modos de Fusión Disponibles en CSS
Los modos de fusión CSS, cuando son admitidos, funcionan de dos formas diferentes. El primer tipo de modo de fusión se denomina
background-blend-mode. Esta propiedad te permite mezclar todos los fondos dentro de un elemento entre sí.
Si has definido, por ejemplo, múltiples imágenes de fondo (soportadas en todos los navegadores más allá de IE8), la primera imagen del fondo será tratada como la capa de origen, y cualquier imagen añadida después, situada debajo, será tratada como capa de fondo.
Añadir un color de fondo (que debe ser el último en la lista) coloca una nueva capa en la parte inferior. El color será tratado como capa de fondo y las imágenes como las capas de orígen. Usando, por ejemplo, la siguiente regla de estilo:
1
2
3
4
5
6
| div { background: url(img/pattern.png), url(img/jellyfish.jpg), #f07e32 ;} |
Obtenemos lo siguiente:
Y después podemos añadir los modos de fusión a la mezcla:
1
2
3
4
5
6
7
| div { background: url(img/pattern.png), url(img/jellyfish.jpg), #f07e32 ; background-blend-mode: screen;} |
Aquí tienes dos divs que usan estos estilos, uno sin el modo de fusión, y la segunda con él:
Un tipo de modo de fusión secundario,
mix-blend-mode, permite mezclar elementos independientes. La norma sobre la aplicación es más específica, pero la fusión se produce en contextos de "apilamientos".
Esto es lo que ocurre cuando usamos
mix-blend-mode, tratando de fusionar la imagen de fondo y el color situados dentro de un mismo elemento (muy poco):
1
2
3
4
5
| .my-overlay-element { background-color: #f07e32; background-image: url(img/jellyfish.jpg); // Note: This image will not be blended with the background color. mix-blend-mode: color-dodge;} |
A continuación, encontrarás una demo interactiva para explorar los efectos de un modo de fusión dado.
Modos de Fusión Independientes
Echemos un vistazo a los modos de fusión disponibles, examinando la fórmula, y aplicando a cada uno de ellos al círculo rojo situado sobre nuestras medusas.
Pantalla:
1
| B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)] |
Se denomina pantalla al concepto de proyectar varias exposiciones de múltiples fotos al mismo tiempo en una sola pantalla. El color resultante siempre es como mínimo tan claro como cualquiera de las capas mezcladas.
Oscurecer:
1
| B(Cb, Cs) = min(Cb, Cs) |
Selecciona el color más oscuro de los dos.
Aclarar:
1
| B(Cb, Cs) = max(Cb, Cs) |
Selecciona el más claro de los dos colores.
Sobreexposición de color:
1
2
3
4
5
6
| if(Cb == 0) B(Cb, Cs) = 0else if(Cs == 1) B(Cb, Cs) = 1else B(Cb, Cs) = min(1, Cb / (1 - Cs)) |
La sobreexposición de color aclara el color de fondo para reflejar el color de origen.
Subexposición de color:
1
2
3
4
5
6
| if(Cb == 1) B(Cb, Cs) = 1else if(Cs == 0) B(Cb, Cs) = 0else B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs) |
La subexposición de color oscurece el color de fondo, aumentando el contraste entre la capa de origen y el color de fondo.
Luz fuerte:
1
2
3
4
| if(Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs)else B(Cb, Cs) = Screen(Cb, 2 x Cs -1) |
Aplica "multiplicar" en los colores más claros y "pantalla" en los colores más oscuros. Esencialmente, "luz fuerte" es lo contrario de "superponer", que sera el que vamos a ver a continuación.
Superposición:
1
| B(Cb, Cs) = HardLight(Cs, Cb) |
Aplica el modo de fusión "pantalla" en los colores más claros y "multiplicar" en los colores más oscuros; igual que el efecto de "luz dura", con la excepción de que los argumentos de la función están invertidos.
Luz suave:
1
2
3
4
5
6
7
8
9
| if(Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb) |
Este modo de fusión aplica una variante de "multiplicar" en los valores oscuros y una variante de "pantalla" en los valores más claros (similares a la pantalla).
En este algoritmo, vemos una función secundaria
D que se establece en la cláusula with basada en el valor azul presente en el color. El resultado final suele ser un efecto mucho más suave que la "superposición".
Diferencia:
1
| B(Cb, Cs) = | Cb - Cs | |
Diferencia toma el valor absoluto de la diferencia entre los dos colores, que tiene el efecto de una foto en negativo.
Exclusión:
1
| B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs |
El modo de exclusión tiene básicamente el mismo efecto que el modo «diferencia», excepto que los colores similares dan como resultado un valor medio de contraste menor (en lugar de un valor más oscuro).
Modos de Fusión Inseparables
Los modos de fusión "inseparables" utilizan algunas funciones adicionales, incluyendo una función
ClipColor, una SetLum y otra Sat.
Nota importante: ninguna versión de Safari admite los modos de fusión "hue", "saturación", "color", o "luminosidad" con
mix-blend-mode o background-blend-mode.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| ClipColor(C) l = Lum(C) n = min(Cred, Cgreen, Cblue) x = max(Cred, Cgreen, Cblue) if n < 0.0 Cred = l + (((Cred - l) * l) / (l - n)) Cgreen = l + (((Cgreen - l) * l) / (l - n)) Cblue = l + (((Cblue - l) * l) / (l - n)) if x > 1.0 Cred = l + (((Cred - l) * (1 - l)) / (x - l)) Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l)) Cblue = l + (((Cblue - l) * (1 - l)) / (x - l)) return CSetLum(C, l) d = l - Lum(C) Cred = Cred + d Cgreen = Cgreen + d Cblue = Cblue + d return ClipColor(C)Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue) |
Advierte que las funciones
min, mid y max hacen referencia a los valores mínimos, medios y máximos. (Mid no es la media de los tres valores.) Los valores de Cred, Cgreen y Cblue hacen referencia a los valores de rojo, verde y azul en color C.
Con estas definiciones, ahora podemos ver los modos de fusión inseparables.
Hue:
1
| B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb)) |
Este modo aplica el color de la capa de origen a la luminancia y la saturación del color de fondo.
Saturación:
1
| B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb)) |
Este modo hace lo mismo que el modo "matiz", pero en su lugar aplica la saturación del primer plano al color y la luminancia del fondo.
Color:
1
| B(Cb, Cs) = SetLum(Cs, Lum(Cb)) |
Aplica el tono y la saturación de primer plano a la luminancia del fondo.
Luminosidad:
1
| B(Cb, Cs) = SetLum(Cb, Lum(Cs)) |
Este modo aplica la luminosidad de la capa de origen con el tono y la saturación de la capa de fondo.
Conclusión
Los modos de fusión en CSS ofrecen una nueva y emocionante flexibilidad para el diseño y experiencias estéticas únicas. Comprender las matemáticas y la teoría del color que se aplica a cada uno de los modos de fusión disponibles te proporcionará un conjunto de herramientas más holístico.
¿Qué harás conforme los navegadores vayan añadiendo soporte a estos modos de fusión?
Enlaces relacionados
- Revisa lo que están haciendo algunos autores con las acciones y los modos de fusión de Photoshop en Envato Market
- Lee más acerca <blend-mode> en Mozilla Developer Network
- Compositing And Blending In CSS (Composición y fusión con CSS) por Sara Soueidan
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario