18.8.14

Tutorial: Efeitos diferentes no gadget de seguidores!

(hahah)
Oi leitores,
Aí pessoal! Vão bem?? Tomara que sim! Hoje trouxe um tutorial bem bacana de Efeito no Gadgets de seguidores! Créditos: Garota no mundo HTML e o blog Chocolate Crunchy 
Vamos ver? Chega mais!

Vá em Modelo>> Editar HTML >> Click em F3 (no teclado) e pesquise por skin
Quando achar, vai estar assim:

Click nesses três pontinhos (...), irá abrir vários códigos, procure por ]]></b:skin>
Escolha um efeito e cole  o código ACIMA da tag! Códigos:

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 */

Efeito Saturação:

/* Efeito saturação nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: blur(0px);opacity: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;
-webkit-filter: saturate(2);
-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 Colorido:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(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;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-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 Contraste:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(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;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-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 Colorido:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(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;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-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 */

Fim! Dúvidas? Comente!
-P4nda





Nenhum comentário:

Postar um comentário

-Proibido brigas
-Comente se gostou da postagem
-Não comente palavrões ou comentários ofensivos
-Não comente spans e divulgação de postagens ou blogs, se não seu comentário será excluido.
-Comente a URL do seu blog para visitarmos!
-Comente no que devemos melhorar!
- Use sinais legais : ☁☀☃☂♣♥♪♫
Obrigada por comentar ;)