2 de outubro de 2012

Tutorial - Imagem com efeito Preto & Branco

                               

      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!

  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);}

  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!


7 comentários:

  1. É muuito bom esse tutorial ^^

    http://manguitarosa.blogspot.com.br/

    beijoos

    ResponderExcluir
  2. Caramba que tuto legaal.
    (clique no meu nome para ir no perfil,beezus)

    ResponderExcluir
  3. não consegui fazer , tem como postar print ?

    ResponderExcluir
  4. Faz tempo que procuro, nenhum dava certo. :) Adorei

    olhardeumatimida.blogspot.com

    ResponderExcluir
  5. Onde é esse design, procurei mais não achei

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)