05 fevereiro 2013

{Pedido} Efeitos HTML com GrayScale {Preto & Branco} | Meta Concluída!

| |
Oi gente ^^
Me fizeram um pedido na Ask de um efeito que eu acho muito fofo, o efeito com GrayScale (Preto e Branco). Como muitos já conhecem, eu resolvi fazer 4 modelos diferentes, alguns que você não viram.
Só quero pedir desculpas pela demora, é que eu estava fazendo a Preview e faltava o código do background, então quebrei a cabeça para fazer um (que funcionasse), mas eu consegui ;P
Para ver...
Já sabem o que fazer, né? ;)

1º Efeito {O que foi pedido}

O primeiro efeito, a imagem estará preto e branco, mas ao passar o mouse em cima, estará normal.


No seu HTML, procure por ]]></b:skin> e acima cole:

.black-white-isa {border-radius: 0px;-webkit-transition-duration: .80s;-webkit-filter: grayscale(100%);}
.black-white-isa:hover {-webkit-filter: grayscale(0%); -webkit-transition-duration: .80s;}
border-radius: 0px; são bordas arredondadas. Está sem, mas se quiser poder adicionar.

Visualize para ver se está tudo Ok e depois salve.


Vá em Layout • Adicionar Gadgets • HTML/JavaScript • e cole:

<a href="LINK"><img class="black-white-isa" src="URL DA IMAGEM" /></a>

2º Efeito
Não devem ter percebido muita coisa aí, né? Na seguda fote tem um meio-preto-branco, entendeu? Não? É tipo, a foto é preto e braco pela metade {50%} mas quando passa o mouse em cima fica totalmente preto e branco.

No seu HTML, procure por ]]></b:skin> e acima cole:

.black-white-isa-2 {-webkit-filter: grayscale(50%); border-radius: 0px;-webkit-transition-duration: .80s;}
.black-white-isa-2:hover {-webkit-filter: grayscale(100%); -webkit-transition-duration: .80s;} 
Agora vá em Layout • Adicionar Gadgets • HTML/JavaScript • e cole:
<a href="LINK"><img class="black-white-isa-2" src="URL DA IMAGEM" /></a>

3º Efeito
Esse é o oposto do segundo.

No seu HTML, procure por ]]></b:skin> e acima cole:


.black-white-isa-3 {-webkit-filter: grayscale(100%); border-radius: 0px;-webkit-transition-duration: .80s;}
.black-white-isa-3:hover {-webkit-filter: grayscale(50%); -webkit-transition-duration: .80s;} 
Agora vá em Layout • Adicionar Gadgets • HTML/JavaScript • e cole:
<a href="LINK"><img class="black-white-isa-3" src="URL DA IMAGEM" /></a>

4º Efeito
Esse efeito é o oposto do primeiro: é normal e ao passar o mouse em cima fica preto e branco.


No seu HTML, procure por ]]></b:skin> e acima cole:
.black-white-isa-4 {-webkit-filter: grayscale(0%); border-radius: 0px;-webkit-transition-duration: .80s;}
.black-white-isa-4:hover {-webkit-filter: grayscale(100%); -webkit-transition-duration: .80s;} 

Agora vá em Layout • Adicionar Gadgets • HTML/JavaScript • e cole:
<a href="LINK"><img class="black-white-isa-4" src="IMAGEM" /></a>

Lembre-se: os efeitos são meus, ou seja, se usar ou repassar credite. 

Gente, minha meta de 65 seguidores finalmente foi completada! Obrigada à todos vocês ^-^

P.S.: A Jana do blog Too Kawaii {é só fuçar nos meus afiliados e você acha o blog dela.} A Jana ganhou um joguinho do post passado. No meio do texto sobre o esclarecimento eu coloquei que se comentassem com a palavra chocolate, iriam ganhar divulgação, e só ela comentou com a palavra. Então, daqui apouco vou colocar o blog dela ali no divulgando. Gente, não sou de indicar, mas visitem! Ela é mega simpática e o blog dela {que também é de HTML e utilitários} é muito perfeito!




11 comentários:

  1. Adorei o tutorial ! E parabéns flor por sua
    meta atingida . Que venha muitas
    outras . Sucesso!

    Kisses ♥

    Visita >> http://pensamento-jhenny.blogspot.com.br

    ResponderExcluir
  2. Os efeitos são lindos, todos! E o melhor é que foi uma coisa feita por você, amei! *o*
    Meu preferido é o primeiro, lindo!
    Beijo :D
    ill-helpyou.blogspot.com

    ResponderExcluir
  3. Muito útil o tutorial, eu uso o efeito preto e branco nas imagens do meu blog, ficam lindos!
    Seu blog é muito lindo! Estou te seguindo, dá uma passadinha no meu?
    Diamante Negro

    ResponderExcluir
  4. Ain *-*, adorei!.
    Desculpa não postar comentários tão frequentemente aqui, mas é que as aulas começaram e as vezes esqueço de visitar alguns afiliados ¬¬
    Ana - TSD.

    ResponderExcluir
  5. Acho que nem preciso dizer que os efeitos são perfeitos, né? o meu preferido foi o segundo, muito lindo ^^ Adoro efeitos com Grayscale, o melhor é que foram feitos por você, né? Beijos, Explodindo Glitter

    ResponderExcluir
  6. Noossaa! Amei.Eu também pedi esse na ask,e achei que vc não atender.é exatamente o que eu tava procurando.Já vi um num blog, mas além de ser ao contrário(é colorida e quando passa o mouse fica preto e branco) era em todas as imagens do blog,ou seja até nos ícones e cabeçalho.Mas esse(o primeiro) é o que eu imaginava. ainda bem que vc é perita em efeitos,valeu mesmo.já tô usando!!!
    Sckitty World

    ResponderExcluir
  7. Ola desculpe o incomodo.
    Mais no meu blog nao quer funcionar.
    http://yaoipure.blogspot.com.br/
    contato:yaoipure@gmail.com

    ResponderExcluir
  8. Oi linda, ameei os efeitos.. Mais eu queria que voce fizesse um Html do seu blog com todas as coisas que seu blog tem :) Obrigado, e amei os efeitos!

    ResponderExcluir
  9. Não consigo colocar no blog, fiz como vc disse mas não aconteceu nada;(

    ResponderExcluir

« »