Olá! Trouxe um tutorial bem fácil e simples, usando apenas CSS; eu vejo pela internet que alguns blogs utilizam esse efeito como decoração do avatar de comentários, como mostra o blog Cherry Bomb, e fiquei pensando em como seria utilizar em imagens maiores; o resultado é muito lindo!
Trata-se de adicionar uma imagem ou máscara sobre os elementos, de modo a fazer com que esse elemento ganhe o formato da imagem; para isso você precisa criar uma imagem totalmente preta e sem plano de fundo (PNG), salvá-la, hospedar em algum site, como Picasa/Google+, Photobucket, Tumblr...e depois adicionar seu link em CSS; veja o resultado:
Imagem Original (vocês já comeram essas balinhas de gelatina? Eu adoro!!!)
Bom, para adicionar essa máscara em imagens específicas, precisaremos desse código:
<style>
.cuteframe {
width: 700px !important;
height: 674px !important;
-webkit-mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
-moz-mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
-o-mask-image: url(URL-DA-IMAGEM-DE-MASCARA) mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
}
</style>
<img class="cuteframe" src="URL-DA-IMAGEM" height="674" width="100%"/>
Em que width e height se referem a largura e altura da imagem que receberá a propriedade de máscara, para ficar tudo proporcional, URL-DA-IMAGEM-DE-MASCARA é o link de imagens como estas a seguir, que podem ser redimensionadas, e URL-DA-IMAGEM é o link de uma imagem qualquer para adicionar o efeito.
Deixo para vocês algumas imagens para usar como máscara, feitas no Photoshop com Shapes e Brushes encontrados no Deviantart, acho que alguns são da Janaina do So Kawaii, com exceção das 4 últimas encontradas no fotki.yandex.ru, que mencionei nesse post:
Deixo para vocês algumas imagens para usar como máscara, feitas no Photoshop com Shapes e Brushes encontrados no Deviantart, acho que alguns são da Janaina do So Kawaii, com exceção das 4 últimas encontradas no fotki.yandex.ru, que mencionei nesse post:
Você poderá adicionar isso nas fotos de comentários (.comments .avatar-image-container), ou onde preferir, usando no Css só a parte:
-webkit-mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
-moz-mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
-o-mask-image: url(URL-DA-IMAGEM-DE-MASCARA) mask-image: url(URL-DA-IMAGEM-DE-MASCARA);
Espero que gostem!
Que lindo! *-----------------------* mas eu não entendi muito bem, é pra colar onde exatamente esse código? eu tentei e não consegui, sou muito ruim nessas coisas :(
ResponderExcluirBjs
Pode ser em qualquer lugar que aceite HTML, como no HTML da postagem, das páginas, ou em um novo gadget HTML/Javascript, no caso de imagens específicas.
ExcluirAaaaawn adoreeei o sue blog,ele é muito lindo *-*
ResponderExcluirhttp://pensamentosdeumagarotanaotaonormal.blogspot.com.br/
Amei super legal vou fazer no meu novo blog.
ResponderExcluirOi Roberta,vim aqui te pedir um tutorial ou seja te incomodar né??
ResponderExcluirEntão queria que vc fizesse um tutorial,separando o gadaget por uma mola,igual a esse template -> http://www.acessoriosparablogs.com.br/template/caderno.jpg.
Por favor posta esse tuto...
beijos!!!
Imagina, não é incômodo algum :)
ExcluirPelo que vi, parece que o autor do template usa três imagens, uma para o topo, outra para o meio e outra para o rodapé do layout; isso pode ser feito quando vc cria um psd e depois o codifica, bem essa é a maneira que eu faria; em breve vou trazer um tutorial assim.
parece complicado,obrigada,eu espero ^^
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirNão conhecia essa tecnica, agora já sei como faz. Se precisar vou usar *--*
ResponderExcluirWow! Tutorial massa demais, amo seu blog, a cada dia mais lindo <3
ResponderExcluirBjoon
Obrigada :D
ExcluirBjuuuu ♥