05/03/2014

Efeito "Vintage" nas imagens do Blog

"Eu estava aquecido na esperança dos seus olhos" - Olly Murs
Olá pra você que passa por aqui õ/ Como anda o feriado de carnaval de vocês? Eu não estou fazendo nada e eu amo isso -q Estava mesmo precisando de um descanso :)
Bom, me pediram na Ask o tutorial para personalizar as imagens das postagens como usei no Layout anterior a esse, o Vintage, (que foi tão bem recebido por vocês) e então, cá estou eu para ensinar. Antes do tutorial, vale lembrar que ele é todo meu, por isso, se usar, dê os créditos pela misericórdia! Vejam como fica o efeito clicando nas imagens abaixo:

             

Gostaram? Então vamos aprender juntos como fazer :)

Bom, No Painel do seu Blog, clique no nome do Blog  - Modelo - Editar HTML e pesquise por ]]></b:skin> E assim que achar, colo o código abaixo antes disso:
.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%);
}

Pronto! Todas as imagens da sua postagem terão esse efeito vintage! Eu pelo menos acho super legal, dependendo da temática do Layout. No meu encaixava legal! Além de ser um tutorial fácil e super útil.
Mas e ai, o que acharam? Deixem suas opiniões por comentário e se quiser alguma postagem, peçam na minha Ask AQUI. Um beijo em todos :*

20 comentários:

  1. Meu carnaval? meu carnaval tá horrível; estudar TT.TT
    lecau o efeito ^^
    alive-html.blgospot.com.br

    ResponderExcluir
  2. Que efeito lindo! Estou usando no meu novo layout :3
    Fico mega feliz que tenha voltado para a blogosfera :D
    Beijos,
    Blog: Anjo de Cereja & Blog: Contos Fantásticos

    ResponderExcluir
  3. Efeito fodastico *u* Adorei o tutorial
    http://panda-blogueiro.blogspot.com.br/

    ResponderExcluir
  4. Muito bom o tutorial, adorei o efeito! É sempre bom dar um ar vintage nas coisas
    hahaha, Esse estilo é um dos que mais adoro ver em blogs, rs! Bjs

    Visita:

    ResponderExcluir
  5. hmm , efeito lindo *u*

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  6. Nossa, esse efeito é muito lindo >3< Quando estava no layout anterior, eu sempre ficava babando nele ♥

    www.b-urning.blogspot.com.br

    ResponderExcluir
  7. Amei esse efeito, vou incluir ao meu novo layout que estou elaborando (:
    Alex você pode ensinar a colocar esse efeito de frase nas imagens ?
    Beijos Magia Teen

    ResponderExcluir
  8. Eu acho que isso deve ser bem útil, e ainda deixa as imagens mais originais! :3

    www.c-desonhos.com | ♥

    ResponderExcluir
  9. Ah olá moço que ta de volta ~o~ sdds de ti.
    Em fim, adorei esse tuto ele é bem bacana eu adoro criar "efeitos" com os CSS's de imagens, libera a criatividade ^^
    O blog ta com um layout fofinho de mais :3

    XOXO :D | Joven Clube

    ResponderExcluir
  10. Eu sou péssima com esse efeitos, por isso me ajudou moço -q
    Vou até salvar o tuto nos favoritos ><

    http://www.t-eaparty.com/

    ResponderExcluir
  11. Aleeeex, que layout mais lindo!

    Eu adoro coisas vintage e super amei o efeito! Vou testar no layout que estou fazendo, se ficar bom nas minhas imagens, com certeza eu vou usar e já listar seu blog nos créditos. Ah, só uma coisa, pode "modificar" o código? Tipo, colocar o efeito direto na imagem, não no hover e sem a sombra. Se não, sem problemas ><

    Beijos ♥ - Blonde Chaos

    ResponderExcluir
  12. Que tutorial perfeito *0* É realmente muito útil, já favoritei <3

    htmlandresources.blogspot.com.br

    ResponderExcluir
  13. adorei esse efeito, é muito útil >3 E que blog lindo! Sempre gostei do teu blog, era blogueira fantasma, haha!

    http://dr-eaming.blogspot.com.br/

    ResponderExcluir
  14. Yeah, estou meio atrasada mas, POM de volta *A*.
    Esse tutorial é útil e com certeza irei utilizá-lo!
    bem vindo de volta u-u.
    http://p-apple.blogspot.com.br/

    ResponderExcluir
  15. Que saudade desse blog! O layout está lindo, ain meu deus lindo nada tá pfto -q
    Adorei o efeito, é ótimo !
    Beijos,
    c-akeparty.blogspot.com

    ResponderExcluir
  16. Eu fiquei apaixonada como fica o efeito depois (hover) ♥ Adorei adorei adoreii
    beijos
    sim senhorita (clique aqui ou no perfil)

    ResponderExcluir
  17. No meu feriado de carnaval eu ajudei minha mãe a organizar a casa e mexi no computador porque não saio para comemorar coisas do tipo, depois descansei um pouco. O tutorial é ótimo e super original, aliás, notei sua volta e fico feliz por isso, beijos >3<

    Having Cherry ☁

    ResponderExcluir
  18. Adoro vintage, já notou que tudo fica BEM melhor quando se coloca um filtro/efeito vintage nas fotos? Haha, sei nem o que dizer, apenas perfect :3

    http://www.heltonnunes.com/

    ResponderExcluir
  19. Oi, adorei o blog. Da uma passadinha no meu? É o thevinydiary.blogspot.com

    Obrigado.

    ResponderExcluir