Tutorial - Efeito preto e branco nas imagens


Olá amores!

Boa tarde como vão vocês?Eu ia postar ontem,mas eu fiquei sem luz,não eu já tinha tudo pronto ai a luz vai embora e só volta 5 da tarde,vai ter uns dias durante a semana que vem ou até mais que eu não vou poder postar porque o meu pai vai se operar,e eu vou ter que cuidar da casa e do meu irmão.Eu to louca pra colocar o layout novo,acho que não vou nem esperar fevereiro,mas antes eu queria mudar uma coisas mas eu quero saber como é que vocês gostam,com duas ou uma sidebar?com ou sem cabeçalho?pra quem quiser ver como tá o layout e só ir aqui,vou deixar uma enquete aqui no blog,okay?
Voltando ao post de hoje,faz bastante tempo que eu não trago um tutorial né?Por tanto hoje eu trouxe um efeito bem simples e o que eu uso nas ilustrações do blog,créditos pra o Chá com Anjos.Vamos ver?


Preview: Aqui

Aplicando o efeito na elite de afiliados:
Vá no HTML do seu blog, aperte CTRL+F e procure por: ]]></b:skin>.Acima disso, cole:

.pretoebranco {
border: 1px solid #eeeeee;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
-webkit-transition-duration: .40s;
}
.pretoebranco:hover {
opacity: 1.0;
border: 1px solid #666666;
-webkit-filter: saturate(0%) ;
}

Para usar o efeito, use o código: 

<a href="LINK DO BLOG" title=' TITULO AO PASSAR O MOUSE '><img src="LINK DA IMAGEM" class="pretoebranco" /></a>

Aplicando o efeito a todas as imagens do blog:

Vamos repetir o primeiro passo: Acima de ]]></b:skin>, cole:

.post img {
border: 1px solid #eeeeee;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
-webkit-transition-duration: .40s;
}
.post img:hover {
opacity: 1.0;
border: 1px solid #666666;
-webkit-filter: saturate(0%) ;




17 comentários:

  1. Amei o novo lay....
    Só uma sugestão: Você poderia descer um pouquinho as páginas para ficar na direção da sidebar :)
    Gostei do tutorial... Nuca coloquei no blog :\ Mas fica bem legal :D
    Beijos!

    www.falaserioemilly.com

    ResponderExcluir
    Respostas
    1. obrigada =) eu ainda vou ajeitar isso porque falta terminar ;)

      Excluir
  2. amei o tuto :3
    Kisses

    inside-oficial.blogspot.com

    ResponderExcluir
  3. Fica muito legal esse efeito >3<

    www.b-urning.blogspot.com.br

    ResponderExcluir
  4. Que azar :s E espero que dê tudo certo com seu pai >3<
    Que efeito mais lindo *3* Adorei meesmo!

    htmlandresources.blogspot.com

    ResponderExcluir
  5. Sem luz? Que azar, Bellz! E boa sorte com a cirurgia do seu pai! <3

    Adorei os efeitos! Gosto muito do mesmo nos afiliados, fica lindo! :3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  6. Na minha opinião eu preferia sem cabeçalho e com duas colunas, tá muito cute seu lay :3
    Gostei do tutorial >3<

    Beijos <3
    http://p-erfectthings.blogspot.com.br/

    ResponderExcluir
  7. O layout tá ficando lindo, adorei a faixinha (ps.: pegou aonde?)! O efeito é lindo, adorei :)

    Unskilled

    ResponderExcluir
    Respostas
    1. obrigada *-* um modelo do blog Kawaii things,ainda vou colocar os créditos ;)

      Excluir
  8. Eu não entendo patavina de layouts mas de certeza absoluta que esse deve ser lindo!! Em tons de preto e branco deve ficar espectacular!! Desejo-te um fantástico ano de 2014,tudo de bom para ti!! Muitos beijinhos,fica com deus e até breve!! http://musiquinhasdajoaninha.blogspot.pt

    ResponderExcluir