Acho a propriedade background-blend-mode fascinante porque permite mudar as cores das imagens sem edição prévia. A mesma imagem de fundo está sendo usada em todos os retângulos abaixo:
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
saturation
screen
soft-light
normal
As cores foram modificadas usando background-blend-mode para mesclar a imagem com a cor tomato. O código CSS é o seguinte:
div {background:url("imagem.png"), tomato; padding:5px; background-blend-mode:___________;}
Nos exemplos abaixo, ao invés de mesclar uma imagem com uma cor, vou mesclar duas imagens:
normal
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
saturation
screen
soft-light
Para essa brincadeira, o código é o seguinte:
div {background:url("imagem1.png"), url("imagem2.png"); padding:5px; block-size:100px; background-blend-mode:____________}
Se a gente mudar a ordem das imagens no código, temos novas surpresas:
normal
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
saturation
screen
soft-light
Em todos os exemplos acima, usei imagens próprias para background, que são feitas para serem usadas lado a lado no fundo de um elemento ou de uma página inteira.
Para praticar o recurso, use CodePen, W3Schools e MDN.
Até mais!
Nenhum comentário:
Postar um comentário
Todos os comentários são moderados pela autora do blog.