11/11/2014

Efeito Outline nas imagens do blog

  E aí minha gente, como vão? Tomara que bem, estava sem ideia pro post de hoje, e sem nada pra fazer, aí resolvi mexer com meus maridos chamados Códigos de HTML, e nisso tive vontade de fazer um novo efeito para as imagens do blog, tem de dois tipos, sendo aplicado apenas nas imagens de posts e de ser usado em todas as imagens do blog, como as da sidebar. Lembrando que quem fez o efeito para as imagens foi eu, então Credite ok?
  Let's go?!

  Assim como em todo tutorial, vá em Modelo>>> Editar HTML e procure por ]]></b:skin>, achou? Agora acima dele cole um desses códigos:

 Para todas as imagens do blog:
img {
margin-bottom: -7px;
border: 1px solid #cd3333;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
outline: 1px solid #cd3333;
outline-offset: -7px;
-webkit-transition:all 1s; } 

img:hover { -webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
opacity: 1;
outline: 1px solid #cd3333;
outline-offset: -200px;
}
  Onde eu deixei em negrito, você vai trocar pela cor da linha que quiser ok?

  Somente na área da postagem:
.post-img {
margin-bottom: -7px;
border: 1px solid #cd3333;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
outline: 1px solid #cd3333;
outline-offset: -7px;
-webkit-transition:all 1s; } 

.post-img:hover { -webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
opacity: 1;
outline: 1px solid #cd3333;
outline-offset: -200px;
  Espero que gostem do efeito ^.^
  Sinto falta de uma Ask... Usem a Ask ok?

Kissus e bye. 

10 comentários:

  1. Seria legal se tive-se um preview ! ヽ(;▽;)ノ quando cansar do efeito do meu , talvez eu teste !

    http://catorzeinvernos.blogspot.com.br/

    ResponderExcluir
  2. Nossa! Você lembra muito uma amiga minha ~falando isso do nada~ *O*
    Como disse a pessoinha ali do comentário acima, seria legal caso houvesse um preview, mas enfim, muito legal o tutorial. ^^

    Tchau ~ raposasenhorita.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Isso é bom ou ruim?? o.O e porque?
      Ok já vou colocar ^^

      Kissus

      Excluir
  3. U-u essa eu não conhecia!

    www.s-freeze.blogspot.com

    ResponderExcluir
  4. Não conhecia, ou pode ser que sim... ficaria melhor se tivesse uma preview, mas de qualquer modo deve ser muito bonitinho pra você ter escolhido ele <3
    Beijoos ♡ || Caramelos Encantados

    ResponderExcluir
  5. Deve ser lindo, aposto que você se esforçou e gostou dele. Queria um preview, infelizmente não tem :c

    sugar-purry.blogspot.com

    ResponderExcluir
    Respostas
    1. Pelo menos eu gostei do resultados ^^
      Já coloquei ^^

      Kissus

      Excluir