Tutorial - Efeitos nos seguidores

Hey amores! Como vão?!
Hoje decidi trazer vários tutoriais, e para começar, vou fazer um tutorial bem usado: Efeito nos seguidores. Para ver um dos efeitos, é só olhar para o gadget The Lover's aqui do lado esquerdo. Olhou? Gostou? Este é só um dos efeitos que irei ensinar! Vamos aprender?
 Para o efeito, você deve ir até Modelo > Editar HTML e procure por ]]skin e acima dele, cole o efeito que preferir:

Efeito Blur
/* Efeito blur nos seguidores by gnmh */
#Followers1-wrapper {
filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease; -o-transition: all 2s ease; 
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease; -o-transition: all 2s ease; 
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Preto e Branco

/* Efeito preto e branco nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);
filter: gray; filter: grayscale(100%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0);-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
filter: none; filter: grayscale(0);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */


Efeito Sépia


/* Efeito sépia nos seguidores by gnmh*/
#Followers1-wrapper {
filter: sepia(100%);-webkit-filter: sepia(100%); 
-moz-filter: sepia(100%);-webkit-filter(1);
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease; -o-transition: all 2s ease; 
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(0%);-webkit-filter: sepia(0%); 
-moz-filter: sepia(0%);-webkit-filter(0);
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease; -o-transition: all 2s ease; 
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */


Espero que este tuto seja bem útil para vocês, e os créditos deste tuto vão para o Garota no Mundo do HTML
Participe do sorteio do Lost November
Participe do sorteio do Explosive Colors 

8 comentários:

  1. Eu já conhecia, acho legal personalizar a gadget mas prefiro ele normalzinho, no máximo usaria um com efeito opacidade.. Beijinhos flor (◡‿◡✿)

    Having Cherry ☁

    ResponderExcluir
    Respostas
    1. Éh super legal mesmo! Pois é, eu ainda estou em dúvida, mas a opacidade também é super fofo! :)

      Beijinhos! :*

      Excluir
  2. Os efeitos ficam super cutes ^^' adorei ♥
    - Seguindo aq tá :3
    http://secretempir-e.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Dicam mesmo... Que bom que gostou! :D

      Obrigada por seguir!

      Excluir
  3. Nhaa, que efeito maneirinho, adorei Danielle. Mas eu prefiro o gadget normal, só que assim fica bom também e-e

    Beijos | Grandes Sonhadores

    ResponderExcluir
    Respostas
    1. Que bom que gostou! *-* É, muita gente mesmo prefere o gadget normalzinho! '-'

      Beijão e volte sempre flor! :D

      Excluir
  4. Amei os efeitos e vou usá-los. Muito útil!

    Dá uma passadinha lá: http://meninaestranha2.blogspot.com.br/ ♥

    ResponderExcluir
    Respostas
    1. Nhaaa, fico muitoo feliz que tenha gostado, e vai usar! :)

      Beijinhos Lindsay!

      Excluir

-Sempre que comentar seja educado, faça sua crítica, mas com educação e moderação, e não use xingamentos ou palavrões;
-Comente sobre o post, pois não custa nada ler uma coisa que fiz com tanto carinho para você;
-Sempre que comentar deixe o link de seu blog para que eu possa retribuir sua visita
-Se quiser que eu siga seu blog, apenas comente que está seguindo, e já irei retribuir.
-Fico muito feliz por você comentar, sempre irei responder seu comentário com muito carinho!

~Volte sempre~

« »