Modos de fusión para imágenes en CSS

Dado a que todo en la forma de plantear, desarrollar y diseñar sitios web ha ido cambiando y, estimo, lo seguirá haciendo por los tiempos de los tiempos, este tipo de propiedades que van surgiendo a medida que se aceptan, o mejor dicho, se hacen compatibles con los exploradores (al menos los más modernos), se van generando soluciones a diferentes métodos que requerían la utilización de programas de edición de imágenes y por lo tanto aumentaban el tiempo de preparación.

Los modos de fusión son un clásico recurso de Photoshop y adaptado por otros editores, mediante los cuales se modifica relativamente una imagen. Esto es, tendremos modos que la oscurecen, otros que le agregan luminosidad en diferentes medidas y métodos y otros que combinan ambos resaltando sombras, luces y colores según aquella que se seleccione.

Blend Modes en CSS

Para quienes han utilizado estos métodos sabrán que son ideales para trabajar en capas y se pueden generar buenos efectos con solo cambiar el modo de una imagen contrastándola con la capa que viene detrás. La inclusión de esta propiedad entre las opciones de fondo de CSS son ciertamente una buena noticia para aquellos que trabajamos con las dos cosas.

Será ideal en los casos que solo necesitemos utilizar esta propiedad para darle el efecto deseado a una imagen (o a todas) con solo una línea y sin tener que editar en lote o una por una cientos de imágenes que aparecen. Debemos respetar también el hecho de que no todos los exploradores los aceptan actualmente y que deberemos contemplar esto de cara al diseño, para comprobarlo pueden chequear el sitio Can I Use, para esta y cualquier propiedad en la que tengan dudas.

En cuanto a las propiedades en si mismas se aplican como una línea clásica de css que lee lo siguiente:

HTML

<div class="blend multiply"></div>

CSS

.blend.multiply
     {
        background-blend-mode: multiply;
     }

La clase puede tener el nombre que deseen en el HTML, solo asegúrense de llamarla de la misma forma en su hoja de estilos.

Las opciones de modos de fusión disponibles se relacionan directamente con los nombres que suelen utilizar en Photoshop y tienen que ver con la forma de modificar los niveles de luces, sombras y color.

Modos de Fusión en CSS

*/Multiply/*

.blend.multiply
     {
background-blend-mode: multiply;
}

*/Darken/*

.blend.multiply
     {
background-blend-mode: darken;
}

*/Color Dodge/*

.blend.multiply
     {
background-blend-mode: color-dodge;
}
*/Color Burn/*

.blend.multiply
     {
background-blend-mode: color-burn;
}

*/Screen/*

.blend.multiply
     {
background-blend-mode: screen;
}

*/Lighten/*

.blend.multiply
     {
background-blend-mode: lighten;
}

*/Overlay/*

.blend.multiply
     {
background-blend-mode: opacity;
}

*/Hard Light/*

.blend.multiply
     {
background-blend-mode: hard-light;
}

*/Soft Light/*

.blend.multiply
     {
background-blend-mode: soft-light;
}

*/Difference/*

.blend.multiply
     {
background-blend-mode: difference;
}

*/Exclusion/*

.blend.multiply
     {
background-blend-mode: exclusion;
}

*/Hue/*

.blend.multiply
     {
background-blend-mode: hue;
}

*/Saturation/*

.blend.multiply
     {
background-blend-mode: saturation;
}

*/Color/*

.blend.multiply
     {
background-blend-mode: color;
}

*/Luminocity/*

.blend.multiply
     {
background-blend-mode: luminocity;
}

Si desean pueden obtener ejemplos de cada uno de los resultados en el muy útil post de Web Designer Depot a quien agradezco por la información.

Categorizado en: