La propiedad mix-blend-mode en CSS
- Andrés Cruz
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter