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

Un waffle con CSS

Un waffle con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Menú Radial con solo CSS

Menú Radial con solo CSS

Algunos artículos que te pueden interesar

Creando reflejos en nuestras imágenes con webkit-box-reflect

Creando reflejos en nuestras imágenes con webkit-box-reflect

Se explica cómo crear un reflejo de una imagen con la propiedad webkit-box-reflect, además de su sintaxis básica que permite cambiar la posición, desplazamiento y hasta la posibilidad de aplicar máscaras para crear reflejos

Andrés Cruz 05-07-2016

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015