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 mascara 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:
.png)
0 comentários:
Postar um comentário