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:
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!
ótimo tuto, como ja tinha comentado no tookawaii
ResponderExcluirbeijos
~ana
Hallyudramas.
É muito bom,já tinha procurado esse tuto. ;33
ResponderExcluirAmei. ♥
bjs
Hayanne Lins
Profissão Adolescente
Gostei muito do tutorial. Acho que dá uma cara bem diferente no blog ^^
ResponderExcluirHaru Kingdom
Amei!
ResponderExcluirPena 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
Pq não? Não é o navegador? Que pena ):
ExcluirDeve que o seu modelo do blog que não é o Travel/viagem :/
Excluirno meu não pegava no Beamrise ai eu mudei para o chrome e deu certo '-'
ExcluirAdoreeeeei! Vou usar no proximo lay!
ResponderExcluirKissus
Just Our HTML // Perfil :P
Este é um ótimo tutorial, alias é exclusivo, pois nunca vi nenhum blog, postando ele, ah, não ser o seu (Too Kawaii), abraços.
ResponderExcluirAlarme Adolescente
Que top *----*
ResponderExcluirNunca tinha visto!
Como estou tentando fazer um lay talvez eu use, fica muito lindo!
Beijos!
Criatividadeamil.blogspot.com
eu não entendi '-'
ResponderExcluirpra que serve?
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Ótimo tutorial! Adorei a segunda imagem!
ResponderExcluirBjos
http://purplstar.blogspot.com.br/
Gostei do tutorial Jana-chan!
ResponderExcluirTinha visto no seu blog,rs ><
Kissu#
http://the-kawaiis.blogspot.com.br/
Muito bom o tuto e o melhor é que é super fácil de fazer e fica lindinho!
ResponderExcluirBeijos
modaetutorial.blogspot.com
Adorei mesmo o tuto *-*
ResponderExcluirLegal!!
ResponderExcluirTutorial muito bem explicado!
http://daynightv.blogspot.com.br/
Puxa esse blog é perfeito sempre tem otimos tutoriais!!! Gostei muito!!!
ResponderExcluirgabyfaria.blogspot.com
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!
ResponderExcluirAdolescente Nerd
Ameei o tutorial e seu blog é perfeito!!
ResponderExcluirfofurices-garota.blogspot.com -> Super post novinho e joguinho valendo um mês de divulgação!!
Muito bom o tuto amei vou usar no meu próximo layout!
ResponderExcluirKisses ~
Adorei esse tutorial, juro que não conhecia. Vou usar no meu próximo layout!
ResponderExcluirBeijos,
pqngarota.blogspot.com
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
ResponderExcluirGostei muito do tutorial, eu não conhecia ;u;
ResponderExcluirVisita? (April 2nd)
Vêi na boa, blog fei da misériaaaaaa!!!!! Vai ter criatividade no quinto dos inferno Coisa feia da peeexxxtteeeeeee!!!
ResponderExcluirPode 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"!!!!!!!!!!!
Descanse em paz, Português!
Excluirhsuahsua Amém!
ExcluirSerá que ela percebeu que não tem em anônimo? e.e
Isso mesmo Brenda xD
ExcluirAdorei o tutorial, muito original.
ResponderExcluirAmei o tutorial achei maravilhoso mas não to achando a bendita tag T.T
ResponderExcluirNão achei a tag no modelo viagem travel :/
ResponderExcluirAdorei!
ResponderExcluir:) Blog ótimo
ResponderExcluirhttp://seututorialmeututorial.blogspot.com.br/
Pena que o blog acabou... Ele está me ajudando muito á montar o meu novo blog!!
ResponderExcluirMe ajudou muito. Obrigada
ResponderExcluirSinto muito pelo blog ter acabado :(
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 :/
ResponderExcluirEsse tutorial é ótimo. Amei ^^
ResponderExcluirPoxa não conseguir copiar o código.
ResponderExcluir