9 de nov de 2012

Links de navegação em Hover Gradiente

Olá anjos!

Hoje trouxe um tutorial de como personalizar os links da navegação em Degradê. Sinceramente, se eu conhecesse esse tutorial eu tinha usados nos meus Templates há mais tempo, fica muito lindo! Pena que não vi.

O tutorial é do blog Go Imagine. Estou apenas repassando, por isso os créditos do tutorial estão nele próprio. Com muita criatividade, dá para fazer uns efeitos legais. Tipo, colocar um plano de fundo no lugar da cor, ou o degradê antes mesmo do hover, etc. Basta usar a criativadade!


Resultado
Vá no seu HTML, aperte CTRL+F e procure por:

#blog-pager {  (ela fica dentro da tag /* Posts) 

Acima disso, cole:

/* Navegação com efeito hover degradê - http://goimagines.blogspot.com.br */
#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding:10px;
}
#blog-pager a:link, #blog-pager a:visited{
color: #ffffff; /* cor da fonte */
font-size: 16px; /* tamanho da fonte */
padding:5px;
background-color: #8BC2C9; /* cor do fundo */
-moz-border-radius:10px; /* bordas arredondas, apague se não quiser */
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#blog-pager a:hover{
color: #ffffff; /* cor da fonte hover*/
padding:5px;
background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */
background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */
background: -moz-linear-gradient(top, #BFCED5, #8BC2C9);/* firefox3.6+ */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BFCED5', EndColorStr=' #8BC2C9');/* IE */
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}



Um comentário:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!