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
Efeito super fofo <3 adorei.
ResponderExcluirbeijos |Meninas na web
Adorei o tutorial eu ainda não sabia fazer o da bordinha adorei!
ResponderExcluirAceita afiliação?
Beijinhos!
http://diariodeumaadolescente-oficial.blogspot.com.br/
Esses efeitos são muito legais, principalmente para gente que é blogueira, né?
ResponderExcluirBeijooos!!!
http://meninabelly.blogspot.com.br/">
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
ResponderExcluirAcho 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!
ResponderExcluirBeijo
http://senhoritaparadoxal.tk/
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!
ResponderExcluirEm 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
Instagram ∫ Facebook Oficial Page ∫ Miguel Gouveia / Blog Pieces Of Me :D
E agora o mais importante: MUUUUUUUUUUUUUITO OBRIGADO PELO POST!!!!! Fico super lisonjeado e vou já proceder a todas as alterações :D
ResponderExcluirFoste uma querida :')
NEW POST | Autumn Winter ’15 Wishes
Instagram ∫ Facebook Oficial Page ∫ Miguel Gouveia / Blog Pieces Of Me :D
Oii tudo bom?
ResponderExcluirQue efeitos lindos, muito obrigada pelas dicas!!
Um beijo
Katrine Bernardo
Muito boas essas dicas, amei os efeitos!
ResponderExcluirBeijos
Bluebell Bee
Ameeeeeeeeei os efeitos!
ResponderExcluirJá favoritei a publicação e vou tentar fazer nas imagens do blog <3
Beijo
Dicas para Todas
Cada efeito um mais lindo que o outro, achei super diferente o do foco no tênis, amei!
ResponderExcluirBeijinhos.
http://liaencantada/
Adorei os efeitos, achei incríveis.
ResponderExcluirBeijos
http://pimentasdeacucar.blogspot.com.br/
Muito amor pelo seu blog <3 MUITO FOFO ! Amei os efeitos .
ResponderExcluirBeijos | @docevaidadeblog
http://www.docevaidadeblog.com/
Amei os efeitos, acho que vou usar um!!
ResponderExcluirBeijos 1999since.blogspot.com.br
Oi Gleicy!
ResponderExcluirAdorei a seleção de efeitos. O último é realmente adorável. :)
beijos ♥
nuclear--story.blogspot.com | Participe do sorteio
Olá Gleicy, tudo bem?
ResponderExcluirEu amoo o sépia, acho que dá um charme a mais nas fotos *---*
Um beijo minha linda!
Blog da Joanna
Oi Gleicy, bem legais os efeitos. Fica bem bonito, vou colocar no meu blog =)
ResponderExcluirUm beijo lindona.
Blog | Facebook | Youtube | Instagram
Ah que post incrível
ResponderExcluirEstava necessitando desse tutorial! Haha ^^
Amei tanto que até coloquei lá no blog <3
Beijos
Blog Cinderela Por Acaso ♥ | Instagram ♥ | Fan Page ♥ | Youtube ♥
Adorei todos seus tutoriais! To seguindo
ResponderExcluirmuitaaudacia.blogspot.com.br