Efeito Preto & Branco

Olá pessoal ~

Gostaram da postagem passada? Creio que sim ^^ o sexy do Logan rendeu muitos comentários para mim, então serei eternamente grata à ele HAUSHASH' me desculpem por não ter postado mais de uma vez naquele dia para vocês, eu fiquei ocupada com algumas coisas, e não deu tempo para preparar outro post para vocês. Meu computador morreu -q e então eu estou no notbook da minha irmã agora, até o meu resolver ressuscitar ou meu pai comprar outro para mim. Enfim, vamos direto ao assunto? Eu trouxe o tutorial de um efeito bem legal que eu uso em meu blog, eu decidi nomeá-lo efeito Preto & Branco.

Um pouco clichê eu sei, mas esta é exatamente a função que ele faz. Sei que existem outros tutoriais parecidos em inúmeros outros blogs, e por isso não sei à quem creditar. Então se usarem, fariam o favor de creditar o WOT? Bem, este efeito consiste em quando passamos o mouse por cima de uma imagem, o hover dela fica em preto e branco. É um efeito bem simples, e vocês podem usar não apenas nas ilustrações do post, mas em outros lugares também :3 mas isto não vem ao caso agora. Aproveitem o tutorial, e comentem se gostarem (: como eu disse antes, eu gosto de me sentir útil à vocês.

Antes de começar o tutorial, gostaria de avisar que se as imagens dos posts de seu blog tiverem qualquer tipo de personalização à base de HTML você deverá apagar este código, já que este tutorial que irei ensinar personalizará por completo as imagens dos posts. Mas se depois vocês quiserem deixar as imagens como estavam antes é só adicionar o código correspondente à personalização dentro do código do tutorial. Não sei se entenderam, então qualquer dúvida me contatem ^w^

.post-body img {

-webkit-filter: saturate(100%);

-moz-filter: saturate(100%);

-o-filter: saturate(100%);

-ms-filter: saturate(100%);

-webkit-transition-duration: .60s;

}

.post-body img:hover {

-webkit-filter: saturate(0%);

-moz-filter: saturate(0%);

-o-filter: saturate(0%);

-ms-filter: saturate(0%);

-webkit-transition-duration: .60s;

}

Não mudem nada, se mudar pode dar erro no código e ele não funcionará como deve. Como eu disse mais acima, se quiser ter as imagens mais personalizadas, como uma borda em padding por exemplo, é só adicionar abaixo do ".post-body img {" esta tag: 

border: solid 1px #E1E1E1;

padding: 2px;

Mude a cor da borda e do espaçamento se quiser, mas recomendo que altere apenas isso. Quando terminar, visualize, se estiver tudo certo, salve. Espero que tenham gostado. Até mais seus gordos -q