Efeitos fofos e Animados nas imagens com Background-blend-mode


Usando uma propriedade css chamada background blend-mode é possível "misturar", mesclar ou sobrepor dois backgrounds, sejam cores ou imagens.
No template free Contempo Kawaii que compartilhei com vocês eu fiz isso para que a cor do plano de fundo do template ficasse na mesma tonalidade que o da imagem do cabeçalho, que era mais clara.

Basta acrescentar background-blend-mode: normal; ao código css em que deseja aplicar essa mistura, sendo que no lugar de normal você pode usar: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color ou luminosity, dependendo do efeito que quiser obter, mais claro, mais escuro...
No Contempo Kawaii ficou assim:
body { - porque seria para o plano de fundo de todo o template
    background: #f4ddef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSSPCq-IMz6FyfFhSAEhXHb2P3X9V4mcw0ussAnY1cNxwQNd6JRZYkHnWwgglC1_CJzVRqsBYsp9uuN5Artny7u0YzyGzi7FoBt3sEg-SQn8XFOVr3NsFXGYkTZXfPVIF3Jeyu3ZBSTmQ/s1600/bg.jpg) repeat; - tem uma cor (#f4ddef) que eu quero que se misture à imagem do background.
    background-blend-mode: lighten; - mistura-se a cor de modo suave, com mais luminosidade.
    color: #757575;
    font: normal normal 14px Verdana, Geneva, sans-serif;
    margin: 0;
}

Uma coisa legal para se fazer com isso é usar 2 imagens, sendo uma png (sem plano de fundo) ou gif (imagens animadas) sobre outra como plano de fundo. Como nos seguintes exemplos:

I love Cinnamoroll!




As imagens são de um chibi e de um background de chocolate (já postei para vocês anteriormente, lembram? Se não, vejam nas tags chibi e downloads):
Vou sobrepor as duas imagens, sendo que no background de chocolate vou misturar a cor original com outra mais fofa:
.fofo{ - nome da class, pode ser qualquer um.
  border-radius: 50%; - borda arredondada.
  width: 600px; - largura
  height: 500px; - altura
  background-color: lavender; - cor mais fofa que ficará sobre o background de chocolate
  background-repeat: no-repeat, repeat; - no-repeat é para a primeira imagem, no caso, da bonequinha, que eu não quero que repita/ repeat é para a imagem de fundo do chocolate, que eu quero que repita
background-image: url("URL-DA-IMAGEM-DA-BONECA"), url("URL-DA-IMAGEM-DO-BG-DE-CHOCOLATE"); - troque as urls pelos endereços das imagens 1 e 2.
    background-blend-mode: normal, screen; - normal para a boneca/ screen para o bg de chocolate ser misturado à cor lavender
}
E para o texto I love Cinnamoroll, que é opcional:
  <div class='fofo'>
   <center><span style='color: lightblue; font-size: 60px; font-family: Cookie, cursive;'>I love Cinnamoroll!</span></center>
  </div>

Usando gifs que nem estes abaixo encontrados no Glitter Graphics:

Código (cole onde quer que apareça, como em um gadget html/javascript, por exemplo):
<style>
.fofo{
 border-radius: 50%;
 width:280px;
 height: 300px;
 background-color: mistyrose;
 background-repeat: repeat, no-repeat;
background-image: url("URL-DO-Gif"), url("URL-DA-IMAGEM-DE-FUNDO");
    background-blend-mode: screen, normal;
}
</style>
<div class="fofo"></div>
Podemos obter efeitos muito kawaii alterando alguns trechinhos. Usando background-blend-mode: screen para os que têm o plano de fundo preto, a cor some e só ficam os brilhinhos; a maneira como o background é repetido pode ser background-repeat: repeat-y ou repeat-x, para repetir na horizontal ou vertical, e no-repeat para não repetir. E com gifs coloridos você pode deixar o background-blend-mode: normal; caso queira que fiquem coloridos sobre a imagem, ou screen, lighten... para deixar sem cor e dar mais destaque a imagem de fundo, que pode ser, por exemplo, uma foto sua de perfil


Imagem de início do post: Pixabay.com
+sobre background-blend-mode: Mozilla.

0 Comments

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up