Oooooooooi povinho que eu adoro s2 Tudo bem com vocês? Hoje eu trouxe um tutorial [Amo postar tutoriais] Muito chique, que deixa quando você passa o mouse em cima da imagem, ela fica com um efeito Preto & Branco, vamos aprender como faz isso?
Primeiro os créditos ao blog We Heart HTML, agora, vocês estão curiosos pra ver o resultado, não estão? Então, olhe o resultado divo abaixo:
Imagem do We Heart HTML.
Gostaram? querem aprender? então vamos pro primeiro passo!
1° Vá em design, editar HTML, e procure pela tag <head> , após achar essa tag, cole esse código abaixo de <head> :
<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° Agora, vamos pro segundo passo, procurem por ]] e cole esse código abaixo, acima de ]] :
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);}
Bordas arredondadas! :3
Pronto, depois dessas duas etapas, sua imagem estará no efeito preto & branco, mais iaí, quer deixar mais lindjo ainda? Que tal bordas arredondadas? então vamos lá!
Procure por ]] e em cima dessa tag, cole esse código:
img: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);}
img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);}
Proooooooontinho, fácil não é?, então até a próxima gente! & se quiserem algo de postagem, ou algo do tipo, peça nos comentários. Beijos & fui!
Tutorial ótimo *________*
ResponderExcluirObg...Bjoos
É muuito bom esse tutorial ^^
ResponderExcluirhttp://manguitarosa.blogspot.com.br/
beijoos
Caramba que tuto legaal.
ResponderExcluir(clique no meu nome para ir no perfil,beezus)
É sim Elisa.
ResponderExcluirnão consegui fazer , tem como postar print ?
ResponderExcluirFaz tempo que procuro, nenhum dava certo. :) Adorei
ResponderExcluirolhardeumatimida.blogspot.com
Onde é esse design, procurei mais não achei
ResponderExcluir