Forma nas imagens dos comentários (máscara)

Hi Candys!

Tudo Bem com Vocês? Aqui Só eu denovo enchendo o Saco de Vocês! ^-^ Mais então Como eu disse no Post anterior Hoje vai chover Tutoriais no Blog! Acho que não estou muito bem Hoje To falando cada coisa estranha Que vocês não vão querer nem saber Okay vamos combinar que isso foi Estranho E Vocês não precisavam saber Certo? Certo, Mais EntãoHoje vou Trazer Mais um Tutorial Aqui no Blog de Como personalizar As Imagens dos Comentários Ou seja Por uma Forma na Imagem Vocês Entenderam Bem Os Créditos Vão ao Blog Cherry Bomb Bom Vamos Começar? Vamos! 

Vai Ficar Parecida com essa :

Mas dá para por em tudo, inclusive em gifs! Legal né? São imagens, você faz sua imagem em PNG com o fundo transparente e o corpo preto, epois hospeda e coloca no html, super fácil, vamos aprender?

1. HTML

No HTML não tem muito segredo, você vai colocar apenas o código abaixo substituindo pela imagem desejada. Lembrando que o tamanho é 36x36 pixels. O código abaixo você vai procurar pela tag .avatar-image-container {,  copie e cole depois da chave:

Código

-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

Esta vendo que o código se repete? É para funcionar em todos os navegadores, então não esqueça de por a mesma imagem em todos, hein? haha

2. Imagem

A parte no Photoshop é de criação, você deve apenas abrir um novo documendo (ctrl+n) com o tamanho de 36px, feito isso, ali você colocará sua shape, brush, enfim, o que quiser que fique de base. Lembrando que: tem que ser preto com o fundo transparente. Aqui tem algumas, fiquem à vontade para utilizar:

imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem

Bom Espero que Tenham Gostado!

Até a Proxima!

Kisses Candys!