11 de jan de 2016

Negrito, itálico e sublinhado com efeito hover


Hooy gente!!! Tudo bem?
A pedido de uma leitora, hoje vou ensinar a deixar o texto negrito, itálico e sublinhado do mesmo jeito que utilizo aqui no blog. O efeito é bem legal e dá uma descontraída no texto. Para ver o tutorial completo é só clicar em leia mais  

  Primeiramente vá no modelo do blog, clique em editar HTML dê um ctrl + F dentro na caixa de códigos e coloque esse trecho: ]]></b:skin>

Achou? Depois coloque o código abaixo ACIMA do código que você pesquisou:

 /*formatação*/
b, strong, bold { color: #87CEFA; -webkit-transition-duration: .80s}
s, strike { color: #DCDCDC; -webkit-transition-duration: .80s}
u, underline { color: #FFD3E3 ; border-bottom: 1px Dashed #CBECFE; text-decoration: none; -webkit-transition-duration: .80s}
i, em, italic { color: #FFD3E3 ; -webkit-transition-duration: .80s}
/*formatação hover*/
b:hover { color: #FFD3E3 ; -webkit-transition-duration: .80s}
s:hover { color: #FF9900 ; -webkit-transition-duration: .80s}
i:hover { color: #FF9900 ; -webkit-transition-duration: .80s}
u:hover { color: #FF9900 ; border-bottom: 1px solid #FF9900 ; text-decoration: none; -webkit-transition-duration: .80s}

Agora é só personalizar do jeito que você quiser =^.^=

♥ b: negrito;
♥ s: tachado;
♥ i: itálico;
♥ u: sublinhado;

Obervação: quando for personalizar a parte do sublinhado, você pode alterar para dashed (pontilhado), dotted (pontinhos) ou solid (linha normal).

Para mudar as cores do efeito normal e hover, você pode consultar essa tabela de cores: clique aqui


Espero que vocês tenham gostado do tutorial 
e se tiver mais algum pedido ou sugestão é só pedir no ask
Deixe sua opinião. Até a próxima!!
 

2 comentários: