18.6.13

forminhas nas imagens dos comentarios

                                                                 ~Yooooooo
Tudo bem gente? Hoje quando cheguei da aula dei uma passadinha lá no CB e achei um tuto super facil de como mudar a forminha do icon/avatar nos comentarios e eu inclusive testei aqui no blog, vamos aprender?


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

 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:



2 comentários:

  1. Que show esse tutorial! Eu já vi muitos blogs usando mas não sabia como colocar :3 acho que vou usar no próximo template do meu blog! Adorei o Pink Cupcake :3 tudo por aqui é muito fofo e delicado,já estou seguindo! Tenha uma ótima tarde!
    Küss->quem precisa de tv para ver beyoncé ♥.blogspot♥♥.com♥ [tire os corações e espaços para visitar]

    ResponderExcluir
    Respostas
    1. Muito obrigada amr, também estou seguindo seu blog >< ah,estou com uns espaços na elite de afiliados,quer entrar?

      Excluir