Efeito e borda fofa nas imagens

Olá ^-^ Sejam sempre bem vindos!!!
Hoje vou mostrar para vcs como adicionar um efeito para deixar as imagens com a borda igual as que tenho aqui no blog atualmente. É um efeito fofo, ao qual vc pode adicionar cor e dar um formato arredondado que se "desfaz" quando o ponteiro do mouse pára sobre a imagem, pode ser aplicado a todas as imagens de um blog ou a apenas as que se escolher. E o melhor, é que é bem simples:
-Para adicionar o efeito em todas as imagens: 

1.Acesse a área de edição de HTML do seu blog.
2.Procure por ]]></b:skin>
3.Cole acima disto esse código:
.post-body img {
border-radius: 45% / 20%; /* Borda arredondada */
box-shadow: 0px 0px 15px #f5abe5; /* Cor da Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Eliminar borda arredondada */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
4.Visualize e se estiver tudo certo, salve.

-Para usar apenas na imagem que vc quiser:

1.Adicione o código anterior acima de ]]></b:skin>
 2.Troque .post-body img por .arredondado, e .post-body img:hover por .arredondado:hover
3.No HTML da postagem adicione isto:


<img class="arredondado" src="URL da Imagem" />

4. Visualize sua postagem e se estiver tudo ok, publique :3
Espero que gostem. Se quiserem mais formatos de bordas e efeitos, visitem o site do autor deste tutorial. Esse foi o que achei mais fofo.
Beijus...
Créditos: http://ciudadblogger.com/2012/02/efectos-de-bordes-redondeados-en-las.html

14 Comments

  1. Stheffani Teixeira09 março

    Ameeeeeeei esse tutorial!! Vou aplicar no meu blog s2 Seria uma honra eu estar na sua Elite!! *----* Muuito obrigada!! s2

    ResponderExcluir
  2. Pri09 março

    nossa Ro muuuuuito obrigada *-*

    ResponderExcluir
  3. annyz10 março

    esta muy bonito el efecto gracias por el tutorial =D

    ResponderExcluir
  4. Roberta :311 março

    Stheffanni:Obrigada! Já adicionei vc ^^ Beijinhus<3
    Pri: De nada :3 Espero que vc tenha gostado ;3 Beijus e muito obrigada<3!!
    Annyz: Me alegro que te haya gustado! Besitos y gracias<3

    ResponderExcluir
  5. Sophia ♡12 março

    Esse efeito é muito kawaii e seu blog tbm!!!Ameii demais só que esses dias ando sem tempo,só tenho provas rrsrs beijos ^-*
    http://www.cotidianodeumabarbie.blogspot.com/

    ResponderExcluir
  6. Unknown11 abril

    Achei super interessante esse efeito. Só que eu pego mania e fico brincando com as imagens, colocando e tirando o mouse em cima kkkkkkkkkkkkkkkkk

    Val Araujo design

    ResponderExcluir
    Respostas
    1. Roberta :311 abril

      Realmente fica lindo não é ^^
      Eu faço isso tbm rsrsrs...:3
      Seja bem-vinda, beijus e muito obrigada!!!

      Excluir
  7. Nicole Krause07 maio

    Eu não consigo fazer :(

    ResponderExcluir
    Respostas
    1. Roberta :307 maio

      Não? O que não deu certo? Basta add o código acima de /b:skin; se eu puder ajudá-la :)
      Beijus<3

      Excluir
  8. ✰Ester Leme13 setembro

    Roberta,realmente é fofo,estou usando *0*

    ResponderExcluir
  9. Unknown12 dezembro

    Tem como colocar esse efeito em só uma imagem??

    There |Chiclete Funny

    ResponderExcluir
  10. Unknown12 dezembro

    Ops... Já intendi, acho que eu não olhei direito descupe!

    ResponderExcluir
  11. Unknown12 dezembro

    Roberta vc sabe onde tem ou vc tem aquelas Layouts tipo que tem fotos tipo essa doBunny Crazy só que com título, e que pode clicar, agente pode colocar efeito nas imagens etc... Por favor, espero que tenha intendido por que eu não sei explicar muito bem :3 Obrigado

    ResponderExcluir
    Respostas
    1. Roberta12 dezembro

      Acho que você procura por um que mostre miniaturas de postagens na página inicial? Usei um uma vez da Hatsune Miku; ele é bem completo! Talvez seja o que procura...

      Excluir

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 - Deviantart

up