domingo, 15 de junho de 2014

Tutorial: Como mudar a forma da imagem dos comentários

Untitled

Mais uma vez utilizando o tutorial do blog super incrível CherryBomb (cherry-liah.blogspot.com.br) tentarei é claro mudar um pouco, alguns detalhes, mas o conceito é o mesmo, bem simples e super fofo. Infelizmente eu não sei como deixar a forma maior, apenas em uma forma de 36x36, mas caso alguém saiba, por favor me avise nos comentários ou caso eu aprenda eu faço outro post e coloco aqui nesse também. Enfim, vamos lá! :)



1) Vá em Modelo > Editar HTML > Ctrl+F > e digite: .avatar-image-container {

2) Cole depois da chave o seguinte:
-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);
3) Ficará assim:
 .avatar-image-container {-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);
4) Você deve estar pensando "crédo, porque um monte de "(url aqui)" é para poder se visualizado em todos os navegadores, logo, não se esqueça de colocar o link da sua forma em cada um, ok?

5) A forma que você usará deverá ser assim:


A imagem precisá ser em 36x36, com o fundo transparente e com o brush desejado na cor preta, se não, não funcionará. No CherryBomb tem vários exemplos deixarei alguns aqui:

   
para mais alguns cliquem aqui.

Nenhum comentário:

Postar um comentário