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

|
psd ilustração

Olá pessoas, tudo bom?

Estou muito feliz, andei testando uns efeitos no meu blog de testes e finalmente esse deu certo! Créditos ao W3 por ter me ensinado, quem souber inglês e quiser ampliar essa área de máscara nas imagens e caixas é só clicar no link, já que hoje eu apenas vou ensinar como por isso na caixa de comentários como na minha:

Untitled-1

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?

Antes, mil desculpas por não editar nada, logo eu edito tudo! Estou sem internet, então estou postando do serviço, nem pude fazer a ilustração direito, mas assim que eu chegar em casa, dou um jeito de trocar, ok? Peço desculpas a vocês e a Lia.


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:


~Chu!

Tutorial feito por mim: Too Kawaii e Cherry Bomb.


Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

39 comentários

  1. ótimo tuto, como ja tinha comentado no tookawaii
    beijos
    ~ana
    Hallyudramas.

    ResponderExcluir
  2. É muito bom,já tinha procurado esse tuto. ;33
    Amei. ♥

    bjs
    Hayanne Lins
    Profissão Adolescente

    ResponderExcluir
  3. Gostei muito do tutorial. Acho que dá uma cara bem diferente no blog ^^
    Haru Kingdom

    ResponderExcluir
  4. Amei!
    Pena que não funcionou no meu blog ¬¬
    Cara, todo HTML que eu coloco lá, não dá certo '-'
    Pelo menos a maioria.
    Dá uma raiva e-e


    umafadeinuyasha.blogspot

    ResponderExcluir
    Respostas
    1. Pq não? Não é o navegador? Que pena ):

      Excluir
    2. Deve que o seu modelo do blog que não é o Travel/viagem :/

      Excluir
    3. no meu não pegava no Beamrise ai eu mudei para o chrome e deu certo '-'

      Excluir
  5. Adoreeeeei! Vou usar no proximo lay!

    Kissus

    Just Our HTML // Perfil :P

    ResponderExcluir
  6. Este é um ótimo tutorial, alias é exclusivo, pois nunca vi nenhum blog, postando ele, ah, não ser o seu (Too Kawaii), abraços.

    Alarme Adolescente

    ResponderExcluir
  7. Que top *----*
    Nunca tinha visto!
    Como estou tentando fazer um lay talvez eu use, fica muito lindo!
    Beijos!

    Criatividadeamil.blogspot.com

    ResponderExcluir
  8. eu não entendi '-'
    pra que serve?

    ResponderExcluir
    Respostas
    1. Serve para ao invés de deixar o avatar quadrado ou redondo (dependendo da formatação do css) você pode deixá-lo com a borda que quiser, tipo quando vai fazer gifs, entendeu?

      Excluir
  9. Ótimo tutorial! Adorei a segunda imagem!

    Bjos
    http://purplstar.blogspot.com.br/

    ResponderExcluir
  10. Gostei do tutorial Jana-chan!
    Tinha visto no seu blog,rs ><
    Kissu#
    http://the-kawaiis.blogspot.com.br/

    ResponderExcluir
  11. Muito bom o tuto e o melhor é que é super fácil de fazer e fica lindinho!
    Beijos

    modaetutorial.blogspot.com

    ResponderExcluir
  12. Legal!!

    Tutorial muito bem explicado!

    http://daynightv.blogspot.com.br/

    ResponderExcluir
  13. Puxa esse blog é perfeito sempre tem otimos tutoriais!!! Gostei muito!!!


    gabyfaria.blogspot.com

    ResponderExcluir
  14. Onw, eu simplesmente amei esse tutorial, mesmo já tendo visto ele no Too Kawaii quando você postou lá, rsrs, mais irei usar no próximo layout é claro, pois o resultado fica super!

    Adolescente Nerd

    ResponderExcluir
  15. Ameei o tutorial e seu blog é perfeito!!

    fofurices-garota.blogspot.com -> Super post novinho e joguinho valendo um mês de divulgação!!

    ResponderExcluir
  16. Muito bom o tuto amei vou usar no meu próximo layout!
    Kisses ~

    ResponderExcluir
  17. Adorei esse tutorial, juro que não conhecia. Vou usar no meu próximo layout!
    Beijos,
    pqngarota.blogspot.com

    ResponderExcluir
  18. Adorei este tuto, já tentei mais também não deu certo pois meus comentários são personalizados de um jeito diferente e-e

    ResponderExcluir
  19. Gostei muito do tutorial, eu não conhecia ;u;

    Visita? (April 2nd)

    ResponderExcluir
  20. Vêi na boa, blog fei da misériaaaaaa!!!!! Vai ter criatividade no quinto dos inferno Coisa feia da peeexxxtteeeeeee!!!
    Pode seguir meu blog, sua fi da gota!!! É bom que siga, se não vou te rackear~~~~~~~~~~~~~e tô farandho sérioooooooooooooo'''''''''''''''''''''
    Te espero lá, só dá um aviso pra MYLENA que eu goxtei dela e ela é muit gata e eu quero namorar virtualmente com ella *-------*
    Mar num tem cumparação cum tu naum mou veiin, tu é muitho feia, coisa feia da porraaaaaaaaaaa!!!! Sua feiaaaaaaaaaaaaa
    É bom que esteja seguindo meu blog da próxima vez, oou se não eu volto NO CHERRY BOMB E RACKEO ESSA PORRRAAA"!!!!!!!!!!!

    ResponderExcluir
  21. Adorei o tutorial, muito original.

    ResponderExcluir
  22. Amei o tutorial achei maravilhoso mas não to achando a bendita tag T.T

    ResponderExcluir
  23. Não achei a tag no modelo viagem travel :/

    ResponderExcluir
  24. :) Blog ótimo
    http://seututorialmeututorial.blogspot.com.br/

    ResponderExcluir
  25. Pena que o blog acabou... Ele está me ajudando muito á montar o meu novo blog!!

    ResponderExcluir
  26. Me ajudou muito. Obrigada
    Sinto muito pelo blog ter acabado :(

    ResponderExcluir
  27. Adorei, queria mesmo colocar, mas infelizmente eu não tenho .avatar-image-container { no meu HTML, não sei porque, deve ser porque o modelo é diferente, mas eu queria colocar :/

    ResponderExcluir
  28. Esse tutorial é ótimo. Amei ^^


    ResponderExcluir
  29. http://www.fnur.bu.edu.eg/
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/401-2013-11-09-08-03-31
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/398-2013-11-09-07-29-40
    www.fnur.bu.edu.eg/fnur/index.php/main-news/item/399-2013-11-09-07-43-49
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/397-eugen-ionesco
    http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/402-2014-2013

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...