In Tutoriais

Formas em Imagens com Css


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:












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!

Related Articles

11 comentários:

  1. 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 :(
    Bjs

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  2. Aaaaawn adoreeei o sue blog,ele é muito lindo *-*

    http://pensamentosdeumagarotanaotaonormal.blogspot.com.br/

    ResponderExcluir
  3. Amei super legal vou fazer no meu novo blog.

    ResponderExcluir
  4. Oi Roberta,vim aqui te pedir um tutorial ou seja te incomodar né??
    Entã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!!!


    ResponderExcluir
    Respostas
    1. Imagina, não é incômodo algum :)
      Pelo 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.

      Excluir
    2. parece complicado,obrigada,eu espero ^^

      Excluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Não conhecia essa tecnica, agora já sei como faz. Se precisar vou usar *--*

    ResponderExcluir
  7. Wow! Tutorial massa demais, amo seu blog, a cada dia mais lindo <3

    Bjoon

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart