Tutorial: Como colocar efeito grayscale no blog




Olá olá galera tudo bem com vocês? O post de hoje vai ser um tutorial muito fácil e prático, para você que adora efeitos é algo super bacana.  Bom, não irei mostrar como fica o efeito aqui no post, mas irá ficar preto e branco a imagem quando você passar o mouse em cima da imagem.


Vamos ao tuto que é o que interessa nesse momento.

Vá em editar HTML > procure por ]]></b:skin> e abaixo cole o seguinte código:


<style>img {filter: none; -webkit-filter: grayscale(0); -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;} img:hover {     filter: url(http://static.tumblr.com/zh19ysk/pOvm9hpdf/filters.svg);      filter: gray;      -webkit-filter: grayscale(1);  -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;}</style>
Clique em visualizar e se o efeito funcionar salve! Fácil não? Encontrei esse código no tumblr e achei muito legal, pois deu para usa-lo aqui no blog, enfim... Espero que tenham gostado do post e até o próximo post.

Obs: Irá ficar com o efeito grayscale em todas as imagens do seu blog.

2 comentários:

- Obrigado pela visita e pelo comentário, não se esqueça de deixar o link do seu blog abaixo para que eu possa retribuir sua visita.

-Se for para criticar que seja logado, em anônimo sua opinião não valerá de nada.

 
Design e programação: Carol Mascarenhas
Confissões de um garoto - 2011 / 2015. Todos os direitos reservados Tecnologia do Blogger