Páginas

10 janeiro 2013

Efeito sépia nas imagens do blog


Hello cherries! Como estão? Eu estou com saudades do blog. Tenho postado pouco porque acabei tendo que trabalhar nestas férias. No fim das contas não pude fazer muita coisa que pretendia fazer, mas estou dando o meu melhor para manter o blog atualizado.

O tutorial de hoje vêm sendo pedido desde que eu mudei o layout. Sei que todos vocês estão loucos de curiosidade para saber como eu fiz esse efeito de mudança de cor ao passar o mouse nas imagens do blog. Então mate sua curiosidade clicando em "Continue lendo".
É muito simples. Abra o HTML do seu blog é cole o seguinte código acima de ]]></b:skin>

img {
-webkit-filter: sepia(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: sepia(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

É só salvar e pronto! Todas as imagens irão ficar com o efeito  automaticamente.
Bem mais simples do que você imaginava não é? Espero que tenha gostado. Kissus!

Gostou do tutorial e quer reblogar? Leia as regras primeiro!




145 comentários:

  1. Respostas
    1. Mega útil, mas já sabia deste tuto. Pessoa visitem meu blog, siga? Seguirei de volta!
      Retribui Liah?

      Kiss: the-inevitable-oficial.blogspot.com.br

      Excluir
  2. Acho muito lindo esse efeito, como também o do preto e branco ao passar o mouse :3

    ResponderExcluir
  3. noooooosssa achei lindjo demais, vou tentar fazer kkkkkk

    http://ex-pressando.blogspot.com.br/

    ResponderExcluir
  4. É um efeito tão lindo... Queria saber como fazia desde que o vi aqui no blog, só não esperava que fosse tão simples!

    Beijos ♥ Jeito Único

    ResponderExcluir
  5. Oi Flor deixei um selinho para você no meu blog, Dá uma olhadinha lá:
    http://likedreamsofgirls.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tuto! Vou ver se uso no próximo lay *_*! Um abração!

    ~> dicasblogspot-db.blogspot.com

    ResponderExcluir
  7. no meu blog eu tenho ao contrário, ou seja tenho em sépia e quando passo o rato fica a cor normal da imagem :D

    ResponderExcluir
  8. Amei o efeito sépia! O meu deu certo. Amei seu blog. PERFEITO!! Já estou lhe seguindo, segue o meu tbm. Bjs

    bruna-secrett.blogspot.com.br

    ResponderExcluir
  9. Gostei! Muito legal! Adoro efeitos de coisa antiga hahahah

    rascunhosecaprichos.blogspot.com.br

    beijos

    ResponderExcluir
  10. Amei e estou usando!!
    http://guriaamodaantiga.blogspot.com.br/

    ResponderExcluir
  11. Nem parece ser t]ao difícil e o efeito final fica lindo! Acho que vou usar no próximo layout do meu blog, adorei! Um beijo, Luly.
    the-zombie-attack.blogspot.com

    ResponderExcluir
  12. Seria legal te ver mais presente aqui, mas nós entendemos :D
    Adorei o efeito, parecia ser mais difícil, beijos.

    CLUBE SPLASH (perfil).

    ResponderExcluir
  13. Esse efeito é lindo vou usar no meu próximo layout!!
    Beijos

    ResponderExcluir
  14. Eu gostei, mas tem jeito de deixar esse efeito só nas imagens da postagem?
    Nao quero deixar na lateral e nem na imagem do cabeçalho :/

    Bjos

    ResponderExcluir
    Respostas
    1. ja fucei aqui e descobri
      pode deixar!
      valeu pelo codigo!
      bjokas

      Excluir
  15. Ameei já coloquei no meu blog, e já divulgem também muitas meninas perguntaram onde eu acheei , e disse que foi aqui ,


    blogpapocorderosa.blogspot.com

    ResponderExcluir
  16. Achei lindo o efeito. Encantador *-* rs
    Parabéns pelo lindo blog, Adália!


    lookando.blogspot.com

    ResponderExcluir
  17. Muuuito lindo, adorei o efeito *--*

    chocolatecomvanilla.blogspot.com

    ResponderExcluir
  18. Liah eu gostaria muito que você ensinasse fazer o efeito que esta a sua pagina de goodies.
    Beijos!

    Brigadeironoglitter.tk

    ResponderExcluir
  19. Que diferente, adorei!! Estou usando no meu blog :)

    ResponderExcluir
  20. Velho, tava me matando por esse código
    mto obrg flor
    beijo

    ResponderExcluir
  21. O efeito é bem bonito,mas troquei de layout hoje e não combina com ele :/ #xatiada - Beeijos

    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  22. Achei outros efeitos: http://princesaabusada.blogspot.com.br/2013/01/efeitos-nas-imagens-do-blog.html

    ResponderExcluir
  23. já conhecia esse tutorial, fica muito bonito mesmo, ainda mais no seu blog, vc soube combinar muito bem com as cores padrões do seu blog, ficou perfeito!

    Adolescente Nerd

    ResponderExcluir
  24. Simplismente amei! Estava atrás desse tutorial muito tempo.
    Muito obrigada,amo o blog.
    Beijos
    http://cantinhodophotoscape.blogspot.com/

    ResponderExcluir
  25. exatamente oq eu estava procurando !

    http://blogdaelaniia.blogspot.com.br/

    ResponderExcluir
  26. Eu gostei do tutorial vou usar no meu próximo layout será que vai ficar bom ? rsrsr =)

    1ahistoria.blogspot.com.br

    ResponderExcluir
  27. Me ajudou, obrigada

    http://l-ovelythings.blogspot.com.br/

    ResponderExcluir
  28. Adorei ! Só não vou fazer porque não quero nenhum efeito nas minhas fotos. Dá uma olhada no meu blog? Se gostar segue?

    Sonhos-da-luisa.blogspot.com

    Beijos !

    ResponderExcluir
  29. Amei! Super útil... :)

    http://sem-normalidade.blogspot.com.br/

    ResponderExcluir
  30. É bem facinho de por, ja sabia dele, mas mesmo assim, obrigada por postar *_*

    Seu blog é inspiração pra mim, muito bonito e organizado ^^

    Beijos
    too-kawaii

    ResponderExcluir
  31. Amei o o tutorial Liah, já tá lá no meu blog.

    Ah, vc posta im tutorial ensinando como fazer goodies que nem o seu?

    ResponderExcluir
  32. ae! enfim que vc postou né pq queria colocar do meu e funcionou haha adorei
    http://meninascapricho-dada.blogspot.com.br/

    ResponderExcluir
  33. Adoro o efeito, no proximo layout do blog vou colocar um parecido, o de opacidade.
    Beijos,
    www.theattitudeincluded.blogspot.com.br

    ResponderExcluir
  34. Ah eu já tinha visto esse efeito em p&b também, acho muito lindo!!
    Obrigada por compartilhar =)
    Beijos!

    ResponderExcluir
  35. LOL Liah, o efeito é DEMAIS! Adorei, cara xD Parabéns, Liah, e boa sorte no trabalho aew <3

    Tem post novo no meu blog ♥

    Tenha um ótimo domingo ♥

    Sugar Dance (clique no perfil para visitar)

    ResponderExcluir
  36. efeito suuper lindo ! *-------*
    enfim, o post que você pediu, a reforma do meu quarto ! *----*
    vailá, talvez ele se pareça com o seu refúgio ><
    vale a pena ver ein :3 hihihi
    http://phora-do-ar.blogspot.com.br/2013/01/reforma-do-meu-quarto-o-post-mais.html

    ResponderExcluir
  37. Lindo amei vou usar no meu proximo layout :)

    http://cuteofgirlsnovoblog.blogspot.com.br/

    ResponderExcluir
  38. OIOI, eu estou precisando de uma ajudinha :s
    ñ estou conseguindo forma meu menu no blog, :/
    pode me ajudar ?
    obrigada flor
    Candy Girl Strange

    ResponderExcluir
  39. A minha cãmera tem o efeio sépia paar tirar fotos *-* eu curto bastante :)

    Faz uma visita ?
    http://peoplecrazystipoeu.blogspot.com.br
    beijos

    ResponderExcluir
  40. Achei super show,já estou usando no meu blog,com um efeito super show
    Clica no meu nome e vai no meu perfil,bjs.Deus te abençoe.

    ResponderExcluir
  41. Amei e estou usando *U*! Um abraço!

    caindoonareal.blogspot.com.br/

    ResponderExcluir
  42. Adorei muito o efeito, também tinha ficado curiosa de como fazia esse efeito desde que você mudou! Ficou muito divo!!

    Beijos!
    Garota Vertigem

    ResponderExcluir
  43. Nossa muito lindo esse efeito, normalmente eu vejo aqueles que a imagem fica meio branca, mas esse é perfeito, é lindo! Vou tentar (sou o cúmulo do péssimo quando o assunto é html haha) lá no meu blog. Ah, se eu não conseguir rs, vou vir aqui tirar minhas dúvidas, posso?

    Beijos
    www.picturesandreams.blogspot.com

    ResponderExcluir
  44. Esse efeito é lindo amooor, bjs
    docinhodechocollate.blogspot.com

    ResponderExcluir
  45. Muito bom, gostei mesmo!
    http://clumsywoman.blogspot.com.br/ > Blog iniciante, tem posts legais

    ResponderExcluir
  46. Adorei a dica (e o blog) :*
    http://girls-x-girls.blogspot.com.br/

    ResponderExcluir
  47. Ameei! Já peguei para mim *-*
    Obrigada flor! :)

    ResponderExcluir
  48. Legal esse efeito, queria fazer um pedido, será que pode fazer um tutorial de caixa de códigos personalizada?

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  49. Legal, pena que só funcione no Google Chrome. Meus navegadores favoritos são Firefox e Opera. :(

    ResponderExcluir
  50. Vou usar isso no meu próximo layout! Obrigado!

    http://ocopodeleite.blogspot.pt/

    ResponderExcluir
  51. Que blog lindooo!
    Comecei agora o meu e amo essas dicas e os tutoriais são incríveis!
    Parabéns.

    www.utopianuvem.blogspot.com.br

    ResponderExcluir
  52. Adorei o efeito,acho que vou usar ele no meu proximo layout
    E que pena que você esta atualizando menos,eu amo seu blog
    sweetworldbr blogspot Bjus voltei com meu blog

    ResponderExcluir
  53. Te plagiaram num post O.o
    Post:http://cherry-liah.blogspot.com.br/2011/03/alguns-codigos-para-usar-nas-postagens.html

    Plagiadora:http://sonhos-da-luisa.blogspot.com.br/2013/01/maratona-de-tutoriais-marca-texto.html

    ResponderExcluir
  54. Adorei esse efeito vou colocar no próximo layout do meu blog!
    Seguindo se puder segue de volta!
    http://garotaindependente-teen.blogspot.com.br/

    ResponderExcluir
  55. Usei! Amei o tutorial! Visita?http://glossdementta.blogspot.com.br/

    ResponderExcluir
  56. Liah, passa o link de outro PS?

    ResponderExcluir
  57. Amei, Vou botar no meu novo layout!!


    http://candy-girlsworld.blogspot.com.br/

    ResponderExcluir
  58. Liah, plagiaram seu cabeçalho: http://blog-our-paradise.blogspot.com/

    ResponderExcluir
  59. Fica lindo com lay vintage!

    http://tocando-ceu.blogspot.com.br/

    ResponderExcluir
  60. Esse efeito dá um toque bem bacana na imagem, parabéns pelo tuto!
    Convido a você a acompanhar os quadros novos que estão surgindo no meu blog, inclusive um já teve sua estréia lá, bora conferir? xD
    caveirasrosas|blogspot.com

    ResponderExcluir
  61. Te plagiaram num post O.o
    Post:http://cherry-liah.blogspot.com.br/2011/03/alguns-codigos-para-usar-nas-postagens.html

    Plagiadora:http://sonhos-da-luisa.blogspot.com.br/2013/01/maratona-de-tutoriais-marca-texto.html

    ResponderExcluir
  62. Oi flor, olha, acabei de criar um bloguinho com as suas dicas, olha não tá perfeito ainda não, tá? Bjo!

    http://pinkmoonbr.blogspot.com.br/

    ResponderExcluir
  63. Oiee,
    Indiquei você num Meme:
    http://www.conversaintima.com/2013/01/meme-selinho-da-indicacao.html
    Bjs e te espero lá

    ResponderExcluir
  64. Nhaaaa gosti :)
    vou usar num layout! onde você consegue esses brushes lindos de pássaros hein Liah?
    http://thesuspects-br.blogspot.com.br/
    Beijos

    ResponderExcluir
  65. Adoro seus tutoriais, e aproveito pra convidar todos para passarem lá no meu blog, serão muito bem vindos :)

    www.c-yourmind.blogspot.com

    ResponderExcluir
  66. Adorei! Vi isso num blog outro dia e fiquei curiosa pra saber como faz! Brigada! Tô adorando seu blog e as dicas! Como meu blog é novo e nunca levei nenhum blog a sério como levo esse, então tô tentando aprender tudo que posso pra fazer dele um blog bem lindo!

    Beijo!

    clubemeninasleitoras.blogspot.com.br

    ResponderExcluir
  67. Acho muito legal o seu blog, ajuda muitas pessoas que estão começando (é o meu caso).

    Passa lá no meu blog ? Ainda não está perfeito rsrs...

    http://eueopassaro.blogspot.com.br/

    ResponderExcluir
  68. Nossa, que efeito liiindo! E super fácil de fazer...vou salvar teu post nos favoritos e vou tentar lá depois! Obrigaada por mais uma dica óótemaa amore! \Õ/

    Beeijos
    www.blogmymemories.com

    ResponderExcluir
  69. Oi! Meu nome é Sofia, e eu estou começando a fazer um blog de layouts. Adorei o seus tutoriais, utilitários e posts em geral! Eu queria saber se você aceita fazer parceria! Ainda sou nova neste "ramo", mas queria muito aprender muito mais!
    Obrigada

    www.ssdlayouts.blogspot.com

    ResponderExcluir
  70. Muito bom , esse blog fez com que o meu blog saice do ruim para o Bom , mim ajudou muito como sempre esse blog e show

    ResponderExcluir
  71. Concurso rolando lá no blog gente, bora visitar ! O prêmio é dois meses de divulgação e um post falando sobre o blog :)
    Ta valendo a pena ! Beijos
    http://sentierodellerose1.blogspot.com.br/2013/01/concurso-meu-blog-no-sdr.html

    ResponderExcluir
  72. ola lindinha , lindo blog em :) ja estou seguindo , segue la devolta ! http://www.blogthaisbrito.blogspot.com.br/

    ResponderExcluir
  73. ola lindas vcs gostariam de um novo layout e templante , tudo novo no seu blog , eu faço para vc de GRAÇA :) é só vc ir em contatos no blog e deixar seu pedido , com o email do seu blog e sua senha , e se vc quiser um novo templante , e que eu personalize os comentarios eu tambem faço e so vc me dizer como é que vc quer que eu faça para vc :) http://www.blogthaisbrito.blogspot.com.br/

    ResponderExcluir
  74. Nossa floor, adorei em, muito legal, explicativo e facil, talvez faço ele no proximo layout, adorei :)
    Beijos da Liiah
    asenhoritaambulante.blogspot.com

    ResponderExcluir
  75. Olá, ameei seu blog! Um dia vou tirar um tempo para fazer no meu! Você esta de parabéns mesmo.
    xoxo
    http://eoventolevou-ju.blogspot.com.br/

    ResponderExcluir
  76. Aceita afiliação?
    princessallstar-official.blogspot.com.br
    Kisses!

    ResponderExcluir
  77. amei o tutorial ><
    morango-com-cereja.blogspot.com.br

    ResponderExcluir
  78. Suuuper útil e as fotos ficam lindas! Adorei o tutorial.

    http://factory211.blogspot.com.br/

    ResponderExcluir
  79. Não sei se estou fazendo alguma coisa errada mas nao deu certo no meu... será que vc poderia me ajudar?

    ResponderExcluir
  80. Goostei! Msm não sendo mulher, mas faço as adaptações certinhas para o meu blog. Bjo!

    http://diogofelipeblog.blogspot.com

    ResponderExcluir
  81. Oii Gostei muito mas queria saber se dar para fazer com outras cores
    http://lightweight-encomendas.blogspot.com.br/

    ResponderExcluir
  82. ooi não estou conseguindo deixar assim tem como fazer um video ou entrar em contato comigo ? mayra.bettyboop@hotmail.com também queria saber se tem como deixar em preto e branco

    ResponderExcluir
  83. Amei o efeito, o blog e também deu super certo! ^^
    Parabéns flor, sucesso!

    coisa-degarotas.blogspot.com

    ResponderExcluir
  84. Liah amei o tutorial, mas tem como mudar o efeito de sepia, para outro?
    Eu queria um efeito que deixasse a foto meio esbranquiçada (opaca). Você pode me ajudar?

    Beeijos floor

    ResponderExcluir
  85. muiito fofo e delicado , coloquei no meu novo blog .. Visitem e se quiserem por favor ,participem http://sejavocemesmayourself.blogspot.com.br/... beijinhos

    ResponderExcluir
  86. amei deu super certo ^.^'
    http://vidadekpop.blogspot.com.br/

    ResponderExcluir
  87. oi poderia me dizer como eu poderia editar para deixa com outro efeito ?

    ResponderExcluir
  88. Tentei várias vezes, mas no meu não dá certo, não sei o motivo, pois todos os tuto seus q sigo dão certo!!
    Mas amei a explicação!!

    Sigam meu blog tbm gente----http://trokandoideias.blogspot.com

    ResponderExcluir
  89. Adorei! vou usar no meu, muito bom o efeito e o tutorial *-*

    ResponderExcluir
  90. Muito bom, usei no meu. Fiz também um tutorial ensinando a usar, dei os créditos ao Cherry Bomb :)

    http://wheres-my-stache.blogspot.com.br

    ResponderExcluir
  91. Ammr ' To amando seu blog '-' já consegui fazer vários AMEEEEEEEI ! Mah '-'

    ResponderExcluir
  92. Como faz pra deixar preto e branco ao invés de sepia?

    ResponderExcluir
    Respostas
    1. Oi Heloisa, se não me engano, para por em preto e branco, é só você trocar onde está escrito "sepia" por "grayscale"

      Espero ter ajudado ^^

      http://seesparkles.blogspot.com.br/

      Excluir
  93. Faz menos de um mês que criei meu primeiro blog, e vc não sabe como seus tutoriais estão me ajudando *.*

    Parabéns pelo trabalho, e mto obrigada o/

    http://seesparkles.blogspot.com.br/

    ResponderExcluir
  94. Lindo ! acho que vou usar no proximo layout Beijos :*

    Visitem ---> http://dianefaustino.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Acabeii usando no meu outro blog rsrs


      ---------> http://cha-de-glitter.blogspot.com.br/

      Excluir
  95. AMEI e já coloquei no meu :)
    Tudo lindo e maravilhoso por aqui.
    Beijãoooo

    ResponderExcluir
  96. Oi Liah bom eu ameeeeeei o tuto e coloquei no meu blog obedecendo os termos de compartilhamento de conteúdo, usei o link do seu blog tudinho pode conferir (:

    Sky Blue

    ResponderExcluir
  97. Ótimo tutorial! Já estou usando no meu blo.
    soytiago.blogspot.com

    ResponderExcluir
  98. rebloguei esse ai também bjs vlw
    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  99. noooooossa,mega facil,obrigado cherry Liah

    ResponderExcluir
  100. Tem como atualizar para o novo HTML do blogspot? Obrigada :)

    ResponderExcluir
  101. Ficou show!!! obrigada, vou por esse tutorial no meu blog com crédito as vcs

    ResponderExcluir
  102. nn sei pq, mas nn consigo achar esse cógigo.... como faço???
    bjuus' :*

    http://blogdabiiah-official.blogspot.com/

    ResponderExcluir
  103. O post tá lindo! Mais eu não conseguir fazer no meu blog e olha q eu segui as instruções direitinho, mas enfim parabéns o blog é lindo!

    ResponderExcluir
  104. Oii, o blog aqui é prft, parabéns :)
    Eu não sei se já tem essa tuto aqui mais gostaria de saber como que coloca esse quadrinho onde tá escrito (Gostou do tutorial e quer reblogar? Leia as regras primeiro!) e outra sabe esse neçocinho alí do lado da página que ta marrom e o bichinho que se movimenta é rosa ?? (eu não sei o nome)Se não entender tudo bem kk, mais se entender faz uma tuto de como personaliza isso também ??
    Brigada

    ResponderExcluir
  105. Este comentário foi removido pelo autor.

    ResponderExcluir
  106. Este comentário foi removido pelo autor.

    ResponderExcluir
  107. então, eu acho que se você por no código CSS, direto pelo Designer de modelo do blog funciona, já que acima de ]]> fica backround e etc.
    Bem, vale testar!

    ResponderExcluir
  108. O meu não foi ç.ç



    theicefairy.blogspot.com

    ResponderExcluir
  109. Consegui ^^ Mas em todas as fotos, até no cabeçalho aplica esse efeito Ç.Ç

    ResponderExcluir
  110. Amei o tutorial, me ajudou muito.
    http:// pausaparaparis.blogspot.com

    ResponderExcluir
  111. Ameii,Tava Mesmo Curiosa

    ResponderExcluir
  112. Ameiiii essa dica! Obrigado, meu blog ficou bonitinho :3

    ResponderExcluir
  113. Não acredito que finalmente fiz alguma coisa certa no HTML é muito fácil!!Ameii

    ResponderExcluir
  114. Muito fácil de aplicar no blog,eu amei esse tutorial! Kisses candt!

    ResponderExcluir
  115. porque o meu não funcionou? fiz td certinho

    ResponderExcluir
  116. eu nunca consigo fazer essa coisa de ''ctrl + f'' :( então eu coloquei na CSS e deu super certo, mas ficou em todas as fotos e inclusive na do titulo <3
    >http://riding-down.blogspot.com.br/

    ResponderExcluir
  117. Muito bom o tutorial!
    http://tutoriais-de-hoje.blogspot.com.br/

    ResponderExcluir
  118. Olá, boa tarde, estava visitando seu lindo trabalho e Gostei muito, inclusive do efeito sépia na imagem, incluir no meu Blog, porem não notei credito do seu blog. Obriga

    ResponderExcluir