Modos de fusión en CSS

Los modos de fusión en CSS tienen el mismo comportamiento que cuando los usamos en programas de edición gráfica como Photoshop o Illustrator. Permiten alterar la presentación de un elemento al combinar sus valores de color con los colores del elemento que tienen detrás, logrando resultados visuales imposibles de conseguir por otro camino.

Por entederlo rápidamente, y de forma visual, aquí tenemos un ejemplo de cómo queda una misma imagen sobre un fondo de color gris cuando le aplicamos cuatro modos de fusión diferentes. En este caso el modo de fusión afecta tanto a la imagen como al texto superpuesto, modificando el color para cada elemento:

normal

aclarar

oscurecer

color

diferencia

Aplicar un modo de fusión

En CSS podemos aplicar un modo de fusión a todo el elemento, o solamente a su color de fondo. Para ello tenemos las siguientes propiedades:

background-blend-mode En este caso el modo de fusión se aplica al contenido del fondo del elemento, es decir, permite fusionar una o varias imágenes aplicadas mediante background-image con un color de fondo (background-color). Pero la fusión no afecta a otros elementos. Se puede entender como un modo de fusión interno del elemento.
mix-blend-mode En este caso la fusión afecta a todo el contenido del elemento (fondos, bordes y contenido) entendido como un todo que se va a fusionar con otro elemento o elementos que se encuentren detrás de él.

Valores disponibles

Los valores que aceptan estas propiedades son los habituales de los modos de fusión, aunque en menor cantidad de la que podemos encontrar en aplicaciones como Photoshop.

La base técnica de cualquier modo de fusión consiste en realizar una mezcla de los valores de luz(color) de dos píxeles superpuestos realizando un determinado cálculo matemático para cada modo.

Y atendiendo al resultado visual de cada modo tenemos una clasificación de modos en función de si aclaran, oscurecen, contrastan o modifican de otro modo los valores originales de la imagen al mezclarlos con el color (o colores) que se encuentren detrás.

Para encontrar ua explicación más detallada de como trabaja cada modo de fusión podemos consultar la ayuda online de los modos de fusión en Photoshop. Y para tener una idea más técnica de como trabaja cada modo tenemos el siguiente artículo de Wikipedia sobre los modos de fusión (en inglés).

Estos son los modos disponibles en CSS:

multiply (multiplicar)
screen (trama)
overlay (superponer)
darken (oscurecer)
lighten (aclarar)
color-dodge (sobreexponer color)
color-burn (subexponer color)
hard-light (luz fuerte)
soft-light (luz suave)
difference (diferencia)
exclusion (exclusión)
hue (tono)
saturation (saturación)
color
luminosity (luminosidad)

Veamos ahora cómo funcionan en ambos casos.

Aplicado como fusión en el fondo de un elemento

Para ver su efecto, este modo de fusión se debe aplicar sobre un elemento que tenga definido a la vez color de fondo e imagen de fondo. El modo de fusión que apliquemos mediante la propiedad background-blend-mode determinará cómo se mezclan los colores de la imagen de fondo con el color de fondo del elemento.

En este documento hemos aplicado ese efecto sobre el div.contenedor y sobre el siguiente cuadro que muestra el código de ejemplo. Además el título del documento también tiene definido un modo de fusión. Estos son los valores usados:


.contenedor {
    background-color: rgba(200,120,0,.6);
    background-blend-mode: hue;
    background-image: url(fondo/fondo.jpg);
}
.codigo {
    background-color: darkgreen;
    background-image: url(fondo/lluvia.jpg);
    background-blend-mode: multiply;
}
.titular {
    mix-blend-mode: luminosity;
}

Modo de fusión aplicado a todo el elemento

Veamos aquí una muestra de todos los modos de fusión aplicados sobre la misma imagen para ver su resultado. Al situar el ratón sobre cada imagen desactivamos el modo de fusión para compararla con su apariencia normal. También podemos intercambiar el color de fondo sobre el que se aplica la fusión para ver el resultado sobre tonos fríos y sobre tonos cálidos.

Cambiar color de fondo

Propiedad Isolation

Las fusiones permiten mezclar más de dos elementos siempre que estos se encuentren superpuestos. Cada píxel de un elemento fusionado se mezcla con el inferior aplicando el cálculo que defina su modo de fusión. Y, a su vez, este otro se mezclará con el píxel del elemento inferior aplicando su propio modo. Y así para cada uno de los elementos que formen parte de la fusión.

En este contexto, podemos hacer que cualquiera de los elementos quede aislado del grupo, y no se aplique su modo de fusión. Para eso usamos la propiedad isolation, con su valor isolate.

Atención: Para que el elemento quede aislado tenemos que aplicar la propiedad sobre el contenedor del elemento que tiene aplicado el modo de fusión, y no directamente sobre el propio elemento.

En el siguiente ejemplo tenemos la misma fotografía superpuesta y desplazada sobre sí misma, y en ambos casos tiene el modo de fusión de diferencia. Entre las dos imágenes hay una capa de color, que también lleva el mismo modo de fusión. Inicialmente los 3 elementos se superponen mezclados por el modo de fusión. Al aislar el elemento interpuesto vemos como cambia el resultado de la fusión, mostrando a este elemento con su valor de color inicial y sin participar de la fusión.

Aislar elemento

Este es el código del ejemplo:


        <div id="isol_1" class="foto-isol">
            <img src="venecia.jpg" alt="Probando los modos de fusión">
        </div>
        <div id="isol_2" class="foto-isol">
            <div></div>
        </div>
        <div id="isol_3" class="foto-isol">
            <img src="venecia.jpg" alt="Probando los modos de fusión">
        </div>

        .foto-isol img {
            mix-blend-mode: difference;
        }
        #isol_2 div {
            width: 360px;
            height: 360px;
            background-color: blanchedalmond;
            mix-blend-mode: difference;
        }
        #ck_isol:checked + div + #isol_2 {
            isolation: isolate;
        }

Realmente, en este ejemplo anterior el modo de aislamiento no ofrece nda distinto de lo que se puede conseguir al aplicar el modo de fusión normal sobre el mismo elemento que queremos aislar. De hecho es una forma más directa de conseguir lo mismo, porque trabajamos con el elemento que tiene aplicado el modo de fusión, y no con su contenedor.

Cuando realmente tiene sentido usar el modo de aislamiento es cuando la fusión de varios elementos se realiza en un contenedor que no tiene definido un color de fondo, o lo tiene con un valor de transparencia aplicado, y queremos que la fusión se de únicamente entre los elementos fusionados, pero sin combinarse con otros elementos que pueda haber por detrás de la fusión.

Lo comprobamos en el siguiente ejemplo. La fotografía y la capa de color tienen definido un modo de fusión, mezclando sus colores entre ellas, pero también con el fondo del documento. Pero si aislamos al contenedor de los dos elementos, entonces la fusión se realiza solo entre ellos, sin mezclarse con los colores de fondo:

Aislar fusión


            <div class="isol-b">
                <div  class="foto-isol">
                    <img src="venecia.jpg" alt="Probando los modos de fusión">
                </div>
                <div id="isol_4" class="foto-isol"></div>
            </div>
            .isol-b {
                background-color: transparent;
            }
            .isol-b img {
                mix-blend-mode: luminosity;
            }
            #isol_4 {
                background-color: chartreuse;
                mix-blend-mode: darken;
                }
            #ck_isol2:checked +.isol-b {
                isolation: isolate;
            }