Normalmente, para tener algunos efectos en imágenes o textos en la web, antes tenemos que pasar por algún software como Photoshop y así lograr nuestro objetivo, pero esto está cambiando a medida que CSS3 avanza, pues ya podemos ver efectos como los filtros, mascaras e incluso mezclas (tema que vamos a ver a continuación), esto es algo bastante normal ya que en la web igual se suele trabajar con vectores, imágenes, colores, textos, etc.
¿Qué es background-blend-mode?
La propiedad background-blend-mode en pocas palabras lo que hace es mezclar una imagen con algún color y dependiendo del valor, dicha imagen tenga un efecto, ¿Estás confundido?, el código te puede ayudar a entender …
¿Cómo usar background-blend-mode?
Para usar background-blend-mode hay varias maneras, una forma básica es usarla de la siguiente forma:
<div class="imagen"></div>
imagen {
width: 640px; /* Ancho */
height: 425px; /* Alto */
background-image: url(imagen.jpg); /* Imagen */
background-color: #0C94F5; /* Color */
background-blend-mode: multiply; /* Efecto */
}
Solo con esas simples propiedades podemos empezar a usar múltiples efectos:
Multiply
background-color: #0C94F5;
background-blend-mode: multiply;
Screen
background-color: #0C94F5;
background-blend-mode: screen;
Overlay
background-color: #0C94F5;
background-blend-mode: overlay;
Darken
background-color: #0C94F5;
background-blend-mode: darken;
Lighten
background-color: #0C94F5;
background-blend-mode: lighten;
Color-dodge
background-color: #0C94F5;
background-blend-mode: color-dodge;
Color-burn
background-color: #0C94F5;
background-blend-mode: color-burn;
Hard-light
Una de mis mezclas favoritas.
background-color: #0C94F5;
background-blend-mode: hard-light;
Soft-light
background-color: #0C94F5;
background-blend-mode: soft-light;
Difference
Wooow!
background-color: #0C94F5;
background-blend-mode: difference;
Exclusion
background-color: #0C94F5;
background-blend-mode: exclusion;
Hue
Supongo que no todas las mezclas pueden salir bien.
background-color: #0C94F5;
background-blend-mode: hue;
Saturation
background-color: #0C94F5;
background-blend-mode: saturation;
Color
background-color: #0C94F5;
background-blend-mode: color;
Luminosity
background-color: #0C94F5;
background-blend-mode: luminosity;
También puedes usar degradados.
Hard-light con degradado
background-image: linear-gradient(to right, #0C94F5, #B234E9), url(imagen.jpg);
background-blend-mode: hard-light;
Difference con degradado
background-image: linear-gradient(to right, #6DC42A, #ED3A7E), url(imagen.jpg);
background-blend-mode: difference;
Woooooow!!!
Incluso puedes combinar dos imágenes (con o sin color):
background-image: url(imagen.jpg), url(imagen2.jpg);
background-color: #0C94F5;
background-blend-mode: hard-light;
¿Bonito, no?, ahora imagina las múltiples cosas que puedes realizar con todas estas combinaciones, por cierto te dejo un ejemplo para que tu mismo veas lo increíble que es esta propiedad: