Follow Us @soratemplates

sexta-feira, 9 de março de 2012

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 comentários:

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

    ResponderExcluir
  2. nossa Ro muuuuuito obrigada *-*

    ResponderExcluir
  3. esta muy bonito el efecto gracias por el tutorial =D

    ResponderExcluir
  4. 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. 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. 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. Realmente fica lindo não é ^^
      Eu faço isso tbm rsrsrs...:3
      Seja bem-vinda, beijus e muito obrigada!!!

      Excluir
  7. Respostas
    1. 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. Roberta,realmente é fofo,estou usando *0*

    ResponderExcluir
  9. Tem como colocar esse efeito em só uma imagem??

    There |Chiclete Funny

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

    ResponderExcluir
  11. 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. 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 - Google+ - Deviantart