01/12/2012

Efeito preto e branco nas imagens


Oi, povo. Desculpem pelo sumiço! É que tô muito apertada no tempo, não estou conseguindo postar.
Mais continuando, hoje trouxe um tutorial que quando passa o mouse em cima das imagens do blog, ele fica preto e branco. Clique em Leia Mais para ver o resultado! Créditos: We Heart Html.
Esse será mais ou menos o resultado, pois você pode editar:



1. Vá em design, editar html e procure por </head> e acima dele cole:
<filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter>
2. Procure por ]]></b:skin e acima dele cole:
img:hover {-webkit-transition-duration: .50s;filter: url(filters.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);}
Depois é só visualizar e ver se tudo deu certo.
Se quiserem bordas arredondadas, vá em ]]></:skin e acima dele cole:
mg:hover {- border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px; -webkit-transition-duration: .50s;filter: url(filters.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);} 

6 comentários:

  1. Seu blog é lindo e cute!
    Primeira vez aqui! Seguindo! Retribui?
    http://blogdescoladagospel.blogspot.com.br/

    ResponderExcluir
  2. Ótimo tuto.
    Amo esse efeito... eu usava, ai troquei de lay e nem coloquei, esqueci :c KK
    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  3. Oláá
    adoorei o seu blog
    já estou seguindo viiu ;)
    tenha uma ótima semana *--* grande beeijo


    http://anywaybtfashion.blogspot.com.br

    ResponderExcluir
  4. nossa, adorei o tuto...fica show de boal.... florzinha, to seguindo aqui, pois eu amei seu cantinho, e ficaria feliz, se voce me visitasse e seguisse o meu blog também ^^
    domeujeito100.blogspot.com.br

    ResponderExcluir
  5. Adoro esse efeito, eu uso ele lá no blog ^^

    Luce ~ Back To Black

    ResponderExcluir
  6. Olá,rebloguei seu tuto no meu blog;Mas dei créditos
    http://totalbackgroundsk.blogspot.com.br/2013/02/efeito-preto-e-branco-nas-imagens.html#more

    Bjs

    ResponderExcluir

Heart It