21 de set de 2012

Tutorial : Imagem colorida a hover


Ooooi princesinhas tudo bem com vocês ? eu to ótima ( ninguém pergunto ) 
Bom hoje eu to trazendo para vocês um tutorial que aprendi aqui então todos os créditos a ela
é um tutorial muito legal e deixa o blog super fofo então
sem mais enrolação vamos ao tutorial ??
(clique em leia mais e continue lendo )

Esse tuto que estou trazendo é de como deixar a imagem colorida quando passa o mouse em cima ok... 
Que é o efeito que estou usando no meu blog , passa o mouse ai em cima de qualquer imagem para vocês verem
primeiro para depois fazer , por que vai ser meio chato se vocês fizerem algo e não gostarem primeiro
eu aconselho vocês a fazer esse tuto em um blog de teste primeiro , e salvar um modelo do seu template antes 
caso aja algum probleminha e vocês não conseguirem arrumar ok 
Um exemplo para vocês  clique pra ampliar 
É super mega simples vamos aprender 
Editar HTML > f3 > e procure por :
]]></b:skin>
Antes da tag que você acho você vai colar esse código abaixo : 
img {
filter: hue-rotate(360deg);
border-radius: 5px;  /* Bordas aredondadas apague se não quiser */
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 1.0s linear; /* Duração do efeito */
-moz-transition: all 1.0s linear;  /* Duração do efeito */
transition: all 1.0s linear;}  /* Duração do efeito */
img:hover {
border-radius: 15px;  /* Bordas aredondadas a hover apague se não quiser */
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);

Bom o código já diz oque deve ser feito ok , só mude as borda e a duração do efeito
ao menos que você seja algum " ninja do HTML" kkkk
é isso espero que tenham gostado , big beijo e fiquem com Deus

2 comentários:

  1. Adorei a dica , amei o novo layout do blog .


    Bom fim de semana , que Deus te abençoe! .

    ResponderExcluir
  2. :) que bom que gostou amore , oooun obrigada big beijo bom final de semana para você também

    ResponderExcluir