La propiedad mix-blend-mode en CSS

- Andrés Cruz

La propiedad mix-blend-mode en CSS

Con CSS es muy fácil combinar el color de ciertos elementos para tener efectos que de otro modo sería necesario emplear herramientas de retoque fotográfico como GIMP. La propiedad mix-blend-mode especifica cómo un elemento debe mezclarse con el elemento que está debajo de ella.

En esta entrada veremos una series de ejemplos en donde se irán cambiando el color de fondo de negro a blanco progresivamente a través de animaciones con el objetivo de visualizar fácilmente los cambios que existen entre los distintos valores admisibles de la propiedad mix-blend-mode.

Con la propiedad mix-blend-mode se pueden obtener efectos interesantes para mezclar colores con imágenes:

La propiedad cuenta con varios valores los cuales tienen un comportamiento que los hace únicos en comparación con los demás valores:

Se puede notar que al variar la luminosidad del fondo (pasando de blanco a negro) algunas imágenes tienen a desaparecer según el valor establecido en la propiedad mix-blend-mode.

Por ejemplo al pasar a colores oscuros las imágenes con los valores multiply, color-burn, overlay, darkenoft-light, entre otros, tienden a "desaparecer" o dejar de ser visibles.

Otro caso similar es cuando se pasa hacia los colores más claros: color-dodge, overlay lighten, oft-light también tienden a desaparecer.

Puede ver la descripción de cada uno de los valores en la la MDN : blend-mode.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.