DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
04-05-2015

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Efectos hover con CSS

Efectos hover con CSS

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Algunos artículos que te pueden interesar

¿Cómo crear un checkbox personalizado en CSS?

¿Cómo crear un checkbox personalizado en CSS?

En esta entrada veremos cómo crear un checkbox custom o personalizados con solo CSS, con esto se quiere decir que no se emplea la renderización realizada por defecto por los navegadores.

Andrés Cruz 09-07-2015

¿Cómo hacer un sistema de grid (rejillas) responsivo casero en CSS?

¿Cómo hacer un sistema de grid (rejillas) responsivo casero en CSS?

Existen una gran cantidad de frameworks CSS que podrás encontrar el Google que permiten crear rejillas o grid; en esta entrada veremos como crear un sencillo sistema de rejillas con CSS.

Andrés Cruz 06-04-2015

Múltiples columnas con CSS3

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos.

Andrés Cruz 28-10-2013