Decoloración en CSS a través del modo de mezcla

En este Tutorial en linea aprenderemos a realizar el efecto de la decoloración selectiva a través del modo de superposición en CSS.

Mira la imagen de arriba. Este efecto es completamente nuevo y los artistas lo utilizan constantemente, pero estamos interesados en el aspecto técnico de este problema. Tenemos que decolorar toda la imagen, pero al mismo tiempo, dejar el rojo.

Inmediatamente mostraremos el resultado final. Esto es lo que debería pasar al final:
Miramos la foto, también es un ejemplo vivo, ahora pasemos al análisis de la técnica de trabajo.


Pero antes de proseguir miremos como era la imagen antes de la técnica que vamos aplicar: De ahí que y como resultado, CSS y sus modos de mezcla están apurados para ayudar tanto a Chip como a Deil. Este método es universal y fácil de usar.
En este Tutoriales En Linea tomaremos la decoloración selectiva.

Vamos a empezar por imponer una copia a la imagen.

.photo {
  --source: url(https://tutorialesenlinea.futbolgratis.org/s/posts/2019-07/1562867703_decoloracion-en-css-a-traves-del-modo-de-mezcla_-tutoriales_en_linea.webp);

 / * Esta es la capa inferior * /
  background-image: var(--source);
}

.photo::after {
 / * Esta es la capa superior * /
  background-image: var(--source);
}

Luego, necesita cambiar el modo de iluminación de la capa superior para aclarar. en este modo, las áreas claras permanecen opacas, pero las oscuras comienzan a mostrarse. De ahí que necesitamos agregar la propiedad mix-blend-mode.

.photo::after {
  mix-blend-mode: lighten;
}

El resultado fue lo que se necesitaba. Las áreas claras permanecieron opacas y las áreas oscuras de la capa superior se hicieron transparentes.

El siguiente paso es decolorar la capa superior usando el filtro CSS:

.photo::after {
  filter: grayscale(1);
}

Genial, la capa superior está superpuesta con áreas blanqueadas en la fotografía de color inferior:

Super, casi lo que necesitas. Queda por hacer las áreas claras de la capa superior más opacas. Utilice el modo de superposición de nuevo, esta vez. background-blend-mode. Este modo establece el modo de fusión para los elementos de fondo de una sola capa: imágenes, color de fondo, degradado.

Establecimos un color de fondo gris para la capa superior y un modo de fusión de imágenes, hard-light. vea la demostración (Parte Inferior de este Tutorial). Este es un modo combinado que hace que los colores sean más brillantes. Cabe destacar que en la imagen en blanco y negro, hace que sus partes claras tengan más contraste.

Como resultado, tenemos el resultado deseado. 

Si utiliza esta combinación de modos de fusión, las áreas de tonos rojo, azul y violeta se vuelven transparentes, mientras que los colores amarillo-naranja, verde y azul permanecen opacos.

Por supuesto, a menudo no usarás tales modos, sin embargo, una técnica muy interesante puede usarse en cualquier proyecto.

Vea la demostración