Efeitos na coloração das imagens

Olá Anjos!

Vi um tutorial bem legal lá no Kawaii World de coloração nas imagens. A maioria dos efeitos eu não conhecia, e achei bem legal para se usar em uma elite de afiliados ou aplicar nas imagens do blog. 

No tutorial eu deixei para usar na elite de afiliados, mas quem quiser usar em todas as imagens do blog é só substituir o nome da class pelo código .post img

Clique no botão para ver a demonstração dos efeitos.

Os dois primeiros efeitos eu já ensinei aqui. É o efeito desfoque e o efeito preto e branco. O sexto efeito também foi ensinado aqui, é o efeito arco-iris. Você pode ver os tutoriais clicando no links abaixo:

Efeito desfoque

Efeito preto e branco

Efeito arco-iris

Efeito Sépia

1- Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.efeitosepia { -webkit-filter: none; -webkit-transition:all 1s ease;

}

.efeitosepia:hover { -webkit-filter: sepia(1);

-webkit-transition:all 1s ease;

}

2- Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="efeitosepia"/></a>

Efeito Brightness

1- Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.efeitobright { -webkit-filter: none; -webkit-transition:all 1s ease;

}

.efeitobright:hover { -webkit-filter: brightness(0.5);

-webkit-transition:all 1s ease;

}

2- Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="efeitobright"/></a>

Efeito Contrast

1- Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.efeitocontrast { -webkit-filter: none; -webkit-transition:all 1s ease;

}

.efeitocontrast:hover { -webkit-filter: contrast(2.5);

-webkit-transition:all 1s ease;

}

2- Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="efeitocontrast"/></a>

Efeito Invert

1- Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.efeitoinvert { -webkit-filter: none; -webkit-transition:all 1s ease;

}

.efeitoinvert:hover { -webkit-filter: invert(1);

-webkit-transition:all 1s ease;

}

2- Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="efeitoinvert"/></a>

Efeito Saturate

1- Vá até editar HTML e procure por ]]></b:skin>. Acima do código encontrado, cole:

.efeitosat { -webkit-filter: none; -webkit-transition:all 1s ease;

}

.efeitosat:hover { -webkit-filter: saturate(5);

-webkit-transition:all 1s ease;

}

2- Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="efeitosat"/></a>