Inicia sesión


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

Decoloración en CSS a través del modo de mezclaDe la película "Sin City Ciudad del pecado".

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:
Decoloración en CSS a través del modo de mezclaMiramos 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: Decoloración en CSS a través del modo de mezclaDe 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.
La mezcla es el aspecto de la composición que calcula la mezcla de colores donde el elemento de origen y el fondo se superponen. Conceptualmente, los colores en el elemento fuente se mezclan en su lugar con el fondo. Después de la mezcla, el elemento fuente modificado se compone con el telón de fondo. En la práctica, esto generalmente se realiza en un solo paso. 
Los cálculos de fusión no deben utilizar valores de color multiplicados previamente.

La fórmula de "mezcla" se define como: Cm = B (Cb, Cs)

Donde:

Cm: el color resultante después de la mezcla.
B: la fórmula que hace la mezcla.
Cb: el color de fondo.
Cs: el color de origen.
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.es/uploads/posts/2019-07/1562867703_decoloracion-en-css-a-traves-del-modo-de-mezcla_-tutoriales_en_linea.jpg);

 / * 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


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-15
  • Categorias: Diseño Web CSS3 html5 webmasters Trucos y tips Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial