[Tutorial] Efeitos variados para as imagens de post

30 de julho de 2015


Olá pessoal! Está tudo bem com vocês? espero que sim. Viram os posts estão voltando a sair rapidamente de dois em dois dias XD me desculpem por estar com uma leve preguiça de responder os  comentários ok? Eu leio cada um e respondo mentalmente, mas ocupa tanto tempo responder um por um que ás vezes passo horas fazendo isso, Porém eu retribuo todos os comentários em seus respectivos blogs, assim que essa preguiça sair de mim eu respondo de todo mundo okay?Ok.


O post de hoje eu havia prometido ao Miguel Gouveia do blog Pices Of Me, ele me pediu para ensinar a usar o esfeito Fade in e fade out nas imagens do blog, mas como é um tutorial muito simples, resolvi trazer vários efeitos para as imagens do seu blog, vem conferir!



Todos os tutoriais serão aplicados no css do seu blog, e já ficarão automaticamente em todas as imagens das suas postagens. No HTML do seu blog procure por ]]></b:skin> e ACIMA cole o efeito que mais lhe agradar, é só salvar e pronto!

Fade in

Quando a imagem está um pouco "opaca" e quando passamos o mouse ela fica normal. (Efeito atual aqui do blog)


Código


.post img {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
}
.post img:hover {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
}
Fade Out

Quando a imagem está normal e só fica "opaca" quando você passa o mouse sobre ela.


Código


.post img {filter:alpha(opacity=82); -moz-opacity:0.82; opacity:0.82;}.post img:hover {filter:alpha(opacity=100);    -moz-opacity:1.0;    opacity:1.0;}



 Preto e branco

Todas as imagens do seus post estarão coloridas, quando passar o mouse em cima delas elas ficarão em preto e branco.


Código 
.post img{
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(100%);
}


Blur/Desfoque

Todas imagens do seu post estarão normais, porém quando passar o mouse elas ficam desfocadas 

Código


.post img{-webkit-transition: -webkit-filter 1s;}
.post img:hover{-webkit-filter: blur(5px); }


Sépia

Todas as suas imagens estarão normais, quando passar o mouse elas ficam em sépia (amareladas, antigas)


Código


 .post img {
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-transition-duration: .90s;
-webkit-filter: sepia(100%);

Vintage+ bordinha

É um efeito do blog Part of me, adaptado por mim, usei em um layout antigo. As imagens ficam com uma "bordinha" simples e quando passamos o mouse ela dá uma leve escurecida.

Código

.post img{
position: center;
padding:2px;
border:2px solid #ffffff;
box-shadow: 0px 0px 5px #ccc;
-webkit-transition-duration: 1.50s;
}
.post img:hover{
-webkit-transition-duration: 1.50s
filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;
-webkit-filter: grayscale(74%);
}


Espero que tenham gostado do tutorial!  Se usarem lembrem-se créditos aos blog citados e ao Teens Forever 

20 comentários:

  1. Anônimo19:33

    Efeito super fofo <3 adorei.
    beijos |Meninas na web

    ResponderExcluir
  2. Adorei o tutorial eu ainda não sabia fazer o da bordinha adorei!
    Aceita afiliação?
    Beijinhos!
    http://diariodeumaadolescente-oficial.blogspot.com.br/

    ResponderExcluir
  3. Esses efeitos são muito legais, principalmente para gente que é blogueira, né?
    Beijooos!!!
    http://meninabelly.blogspot.com.br/">

    ResponderExcluir
  4. Olá! Sou do grupo "divulgação de blogs para blogs". Adorei sua dica! Realmente vai ajudar muito hehehe. Segui seu blog e, se puderes, dê uma passadinha no meu tb. http://analauraartes.blogspot.com.br/ Bjs

    ResponderExcluir
  5. Acho esse efeitos bem legais, mas prefiro não carregar o blog com muitas coisas e deixar o mais simples possível. Pelo menos por enquanto hahaha quem sabe depois eu não experimente um desses!
    Beijo
    http://senhoritaparadoxal.tk/

    ResponderExcluir
  6. Muito obrigado querida. Confesso que o blazer, os óculos e o porta-moedas foram os artigos que mais gostei de receber. Também amo gatos. Tenho 3 e não tem maior amor :D Contudo, dei o porta-moedas à minha mãe que, como também ama gatos, ficou a babar por ele!
    Em relação ao usares grau, pois... eu entendo-te bem. A minha sorte é que tenho sempre um par de lentes de contacto para desenrascar e posso usar óculos de sol :/

    Um grande beijinho <3

    NEW POST | Autumn Winter ’15 Wishes
    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
  7. E agora o mais importante: MUUUUUUUUUUUUUITO OBRIGADO PELO POST!!!!! Fico super lisonjeado e vou já proceder a todas as alterações :D
    Foste uma querida :')

    NEW POST | Autumn Winter ’15 Wishes
    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
  8. Oii tudo bom?
    Que efeitos lindos, muito obrigada pelas dicas!!
    Um beijo
    Katrine Bernardo

    ResponderExcluir
  9. Muito boas essas dicas, amei os efeitos!
    Beijos
    Bluebell Bee

    ResponderExcluir
  10. Ameeeeeeeeei os efeitos!
    Já favoritei a publicação e vou tentar fazer nas imagens do blog <3
    Beijo

    Dicas para Todas

    ResponderExcluir
  11. Cada efeito um mais lindo que o outro, achei super diferente o do foco no tênis, amei!
    Beijinhos.
    http://liaencantada/

    ResponderExcluir
  12. Adorei os efeitos, achei incríveis.

    Beijos
    http://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir
  13. Muito amor pelo seu blog <3 MUITO FOFO ! Amei os efeitos .

    Beijos | @docevaidadeblog
    http://www.docevaidadeblog.com/

    ResponderExcluir
  14. Amei os efeitos, acho que vou usar um!!
    Beijos 1999since.blogspot.com.br

    ResponderExcluir
  15. Esses efeitos são lindos e eu não sabia como fazer ~~ na verdade quase não sei mexer no html do blog .-.~~ Spokspokpok um dia eu aprendo u.u

    * achei tão fofo esse gatinho para voltar ao topo do blog *-* *

    Blog: Like The Moon
    FanPage do blog

    ResponderExcluir
  16. Oi Gleicy!
    Adorei a seleção de efeitos. O último é realmente adorável. :)
    beijos ♥
    nuclear--story.blogspot.com | Participe do sorteio

    ResponderExcluir
  17. Olá Gleicy, tudo bem?

    Eu amoo o sépia, acho que dá um charme a mais nas fotos *---*

    Um beijo minha linda!
    Blog da Joanna

    ResponderExcluir
  18. Oi Gleicy, bem legais os efeitos. Fica bem bonito, vou colocar no meu blog =)
    Um beijo lindona.

    Blog | Facebook | Youtube | Instagram

    ResponderExcluir
  19. Ah que post incrível
    Estava necessitando desse tutorial! Haha ^^
    Amei tanto que até coloquei lá no blog <3
    Beijos
    Blog Cinderela Por Acaso ♥ | Instagram ♥ | Fan Page ♥ | Youtube ♥

    ResponderExcluir
  20. Adorei todos seus tutoriais! To seguindo
    muitaaudacia.blogspot.com.br

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo