Breaking

Post Top Ad

Your Ad Spot

jueves, 23 de agosto de 2018

¿Cómo usar background-blend-mode?

¿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:

HTML
<div class="imagen"></div>  
CSS
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;
blend-mode multiply

Screen

background-color: #0C94F5;  
background-blend-mode: screen;
blend-mode screen

Overlay

background-color: #0C94F5;  
background-blend-mode: overlay;
blend-mode overlay

Darken

background-color: #0C94F5;  
background-blend-mode: darken;
blend-mode darken

Lighten

background-color: #0C94F5;  
background-blend-mode: lighten;
blend-mode lighten

Color-dodge

background-color: #0C94F5;  
background-blend-mode: color-dodge;
blend-mode dodge

Color-burn

background-color: #0C94F5;  
background-blend-mode: color-burn;
blend-mode burn

Hard-light

Una de mis mezclas favoritas.
background-color: #0C94F5;  
background-blend-mode: hard-light;
blend-mode hard-light

Soft-light

background-color: #0C94F5;  
background-blend-mode: soft-light;
blend-mode soft-light

Difference

Wooow!
background-color: #0C94F5;  
background-blend-mode: difference;
blend-mode diggerence

Exclusion

background-color: #0C94F5;  
background-blend-mode: exclusion;
blend-mide exclusion

Hue

Supongo que no todas las mezclas pueden salir bien.
background-color: #0C94F5;  
background-blend-mode: hue;
blend-mode hue

Saturation

background-color: #0C94F5;  
background-blend-mode: saturation;
blend-mode saturation

Color

background-color: #0C94F5;  
background-blend-mode: color;
blend-mode color

Luminosity

background-color: #0C94F5;  
background-blend-mode: luminosity;
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;
blend-mode hard-light-gradient-hard-light

Difference con degradado

background-image: linear-gradient(to right, #6DC42A, #ED3A7E), url(imagen.jpg);  
background-blend-mode: difference;
blend-mode gradient-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;
blend-mode two-hard-light

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas