Oi gente! Hoje o tutorial é de títulos personalizados. Mas como eles são personalizados? Não sei se perceberam, mas, o título do nosso post tem um hover desfocado. Ele passa por uma transição. Podem testar agora se quiserem!
Vamos começar? Go!
Primeiro vamos instalar a fonte.
Procure por <head> e acima cole:
<link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>
Agora iremos colocar o efeito.
Procure por
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}
Depois de acha-lo apague e substitua por:
h3.post-title a {
font-family: Englebert;
color: #79bbc5;
Font-size: 27px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
h3.post-title a:hover {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(2px); color:#fff;
color: #bbacd0;
}
Entendendo.
font-family: Englebert
Este código é referente a fonte do título do post
color: #79bbc5; Este código é referente a cor do título.
Font-size: 27px; É o tamanho da fonte.
color: #bbacd0; É a cor do título em hover (com o mouse em cima).Prontinho, só visualizar e se estiver tudo certo é só salvar!
CRÉDITOS TOTAIS : GOODS SWEETS
2 comentários:
Adorei o tutorial!
Hey, tem uma tag pra você lá no meu blog!
Beijos <3
Tutu bem bom! kk
Ou melhor, bem explicado, legal, interessante, útil e divo! *--------*
Postar um comentário