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