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?
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
Eu já conhecia, acho legal personalizar a gadget mas prefiro ele normalzinho, no máximo usaria um com efeito opacidade.. Beijinhos flor (◡‿◡✿)
ResponderExcluirHaving Cherry ☁
Éh super legal mesmo! Pois é, eu ainda estou em dúvida, mas a opacidade também é super fofo! :)
ExcluirBeijinhos! :*
Os efeitos ficam super cutes ^^' adorei ♥
ResponderExcluir- Seguindo aq tá :3
http://secretempir-e.blogspot.com.br/
Dicam mesmo... Que bom que gostou! :D
ExcluirObrigada por seguir!
Nhaa, que efeito maneirinho, adorei Danielle. Mas eu prefiro o gadget normal, só que assim fica bom também e-e
ResponderExcluirBeijos | Grandes Sonhadores
Que bom que gostou! *-* É, muita gente mesmo prefere o gadget normalzinho! '-'
ExcluirBeijão e volte sempre flor! :D
Amei os efeitos e vou usá-los. Muito útil!
ResponderExcluirDá uma passadinha lá: http://meninaestranha2.blogspot.com.br/ ♥
Nhaaa, fico muitoo feliz que tenha gostado, e vai usar! :)
ExcluirBeijinhos Lindsay!