05 outubro 2013

Tutorial: Efeito sépia nas imagens do blog

Amber, seu divo *3* (só k-poper entende)

Yoo!
Faz tempo que eu não posto um tutorial...
Mas eu tenho outra noticia, provavelmente, daqui a um tempo, estarei fazendo tutoriais em vídeo *-*
Primeiro vai ser para o Scan, um tutorial ensinando a editar mangás, mas talvez eu continue com essa ideia de vídeo tutorial depois!
Voltando...
Eu aprendi esse tuto com o Cherry bomb!

Nesse tutorial vou ensinar a deixar a imagem do blog com efeito hover sépia. Aquele efeito de foto velha -q
Lembrando que vocês podem pedir tutoriais ou qualquer outro tipo de post também pelo ASK ^^
Vamos ao tutorial?

Vá na parte HTML do seu site e procure por: ]]></b:skin>
Quando achar o código, logo acima, cole:
img {
-webkit-filter: sepia(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: sepia(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

Depois é só visualizar, se estiver tudo bem, salve!
Todas as imagens ficarão com o efeito o/

Simples, não? preguiça de postar algo complexo

Sayo~

2 comentários: