Imagens Com bordas decoradas e Efeito




De um Up no seu blog apenas destacando as suas imagens com lindas bordas. Simples e fácil de usar. Descanse o mouse sobre na imagem e visualize o efeito nas bordas coloridas. Um lindo efeito para posts com fotográfias de Looks, Nails e Make.

Clic e veja o exemplo




---------------------------------------------------------------------
Copie o código abaixo, cole antes de ]]></b:skin> e salve.


  .post-body img {
border-radius: 50% 0; /* bordas */
box-shadow: 0px 0px 1px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:url(
http://i111.photobucket.com/albums/n159/docedani/back05-1_zps62e77b79.gif
); /* Cor da borda */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* bordas */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}




Selecionei alguns Background para usar nas bordas.
Clic com o botão direito na imagem desejada em seguida copiar endereço da imagem e cole na parte verde no código.

     
               



Não conseguiu usar? Clic Aqui



25 comentários:

  1. muitos fofos
    http://decora-harajuku.blogspot.com

    ResponderExcluir
  2. ain que fofos adoorei o tutorial querida super mega fofo mesmo
    http://rennataferreira.blogspot.com.br/

    ResponderExcluir
  3. Sem palavras, adoro seus tutos.
    #SoCute.

    Beijo,
    sweetgirldreams.blogspot.com

    ResponderExcluir
  4. Ameii é super fofo >.<

    Beiijo
    http://naypinkprincess.blogspot.com.br/

    ResponderExcluir
  5. Como fica lindo com as bordas decoradas *-* Adorei a dica!
    Mas como sou lenta demais pra conseguir fazer essas coisas, vou pedir ajuda a Dhay :D
    Beijão, Gi

    ResponderExcluir
  6. Nossa que lindo. Mas acho que o meu layout já tem muita informação, se eu usar vai ficar muito carregado. Mas o efeito é lindo demais. bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  7. Boa tarde florzinha.

    Adorei,que tudo...

    Tem post novo.Confere lá.
    http://arteemunhasluiza.blogspot.com.br/

    ResponderExcluir
  8. Muito legal esse efeito Dany! Adorei! :]

    ResponderExcluir
  9. Oi Dani, primeiramente desculpa por não responder sua dúvida antes! Recebi várias e estou respondendo aos poucos..
    Então, preenche o formulário novamente e coloca teu link que a outra inscrição eu apago! Desculpa pela novamente, qualquer coisa pode falar!
    Mil beijos <3

    www.blogmeninama.com.br

    ResponderExcluir
  10. Olá,meu blog está fazendo uma campanha ''Todos Unidos Contra o Plágio se você quizer participar desta campanha,apenas coloque nosso banner em seu blog,se puder avisar para agente que você irá participar agente agradeçe pois teremos noção de quantos blogs estão participando.Muito Obrigado ♥


    Equipe MR ♥

    mylenaravini(blogspot)

    facebook.com/BlogMylenaRavini

    ResponderExcluir
  11. Oi Amiga!!!!!!!
    Que lindíssimo, eu adorei, vou fazer lá dai te chamo pra ver ok?! tomara que eu acerte, rsrsrs
    Beijos!!!
    http://nailmypassion.blogspot.com.br/

    ResponderExcluir
  12. ai Dany eu adoro esses tutoriais,se pudesse fazia todos no meu blog,pena que não dá né....mas adoroooooooooo
    bjs fica com Deus minha linda...já disse que vc é especial pra mim??? vc é!
    bjs
    http://tudosobreesmaltesunhaseafins.blogspot.com.br/

    ResponderExcluir
  13. Jura amiga? uma hora escolhendo esmaltes?! rsrsrsr
    Quero ver hein?! rsrsr
    Olha estou qse indo pro RJ, qdo for eu t aviso, dai a gente se encontra!!! Vou adorar conhecer vc pessoalmente...
    Beijos!

    ResponderExcluir
  14. Fica muito fofo, mas eu não gosto das minhas fotos com bordas. Mas é sempre bom aprender tutoriais novos! ♥

    >>Bonequiinha de Luxo<<
    - xoxo -

    ResponderExcluir
  15. Aiii que lindoooo *o* favoritei pra quando precisar :3

    ResponderExcluir
  16. Que fofo... amei o tutorial
    Está rolando um sorteio lá no blog, vem participar?!
    Beijos
    http://esmalteetudo.blogspot.com.br/2013/01/primeiro-sorteio-de-2013.html

    ResponderExcluir
  17. ooi, eu queria uma ajuda, eu ñ estou conseguindo colocar isso no meu blog ''Home Goodies Mapa
    F.A.Q'' esses negocinhos pode me ajudar ? obrigada
    http://candy-girl-baby.blogspot.com.br/

    ResponderExcluir
  18. ♕ Hooy
    Q fofura este tutorial !!!
    Resultado lindo !!

    ✖ Obs: Participe do debate que vai ate 4:45
    corraaaaaaaaaaaaa

    http://blog-meninasmalucas.blogspot.com.br/

    ♫ Obrigada pela visita
    Volte sempre ✽

    ResponderExcluir
  19. Q diferente '-' gostei bastante *-------*
    fashion em cores --.coom

    ResponderExcluir
  20. que fofo esse tutorial,já vi tutoriais para fotos,mais não com bordinhas fofas ><
    amei


    visita? se gostar segue
    w w w . supercaprichada . c o m . b r

    ResponderExcluir
  21. Obrigada pela visita

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  22. oi lindinha!
    cada vez que venho por aki fico encantada, muito lindo seu blog, parabéns!
    bjo*

    haaaaaa seguindo aki!

    www.kantinhodavanessa.blogspot.com

    ResponderExcluir
  23. Nunca dá certo com colocar antes de .

    Fiz no meu e só apareceram as letrinhas do código.


    Ficou assim:

    .post-body img {
    border-radius: 50% 0; /* bordas */
    box-shadow: 0px 0px 1px #000; /* Sombra */
    padding:15px; /* Espacio entre la imagen y el borde */
    background:url(
    http://i111.photobucket.com/albums/n159/docedani/back05-1_zps62e77b79.gif
    ); /* Cor da borda */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .post-body img:hover {
    border-radius:0; /* bordas */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;}]]>


    Porque não coloca o código completo?


    Dryka

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...

Ultimas atualizações no Blog ♥