La propiedad mix-blend-mode en CSS

04-05-2015 - Andrés Cruz

La propiedad mix-blend-mode en CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!