20 de jul. de 2012

Negrito, itálico, sublinhado e riscado personalizado

Todo mundo usa o negrito, o itálico, o sublinhado e o riscado para dar mais destaque a algumas palavras e deixar o texto com um visual mais atraente. Hoje vou ensinar a personalizar esses recursos, mudando as cores e deixando os mais atraentes. Vamos lá:


Personalizando com efeito hover 

(muda de cor quando passa o mouse em cima):

Vá em Design, editar HTML e procure por ]]></b:skin>, logo acima cole:

b{color: #DA70D6; text-decoration: none;-webkit-transition-duration: .40s; } /* Estilo do negrito */
b:hover {color: #DA70D6; text-decoration: none;-webkit-transition-duration: .40s; } /* Estilo hover do negrito */
i {color: #63B8FF; text-decoration: none; -webkit-transition-duration: .40s;} /* Estilo do itálico */
i:hover {color: #63B8FF; text-decoration: none; -webkit-transition-duration: .40s;} /* Estilo hover do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00; -webkit-transition-duration: .40s;} /* Estilo do sublinhado */
u:hover {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00; -webkit-transition-duration: .40s;} /* Estilo hover do sublinhado */
strike {color: #009900 ; text-decoration: strike; -webkit-transition-duration: .40s; } /*estilo do riscado */
strike:hover {color: #FF00FF; text-decoration: strike; -webkit-transition-duration: .40s; } /*estilo hover do riscado */


Sem efeito hover:


b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
i {color: #63B8FF; text-decoration: none;} /* Estilo do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
strike {color: #009900 ; text-decoration: strike; } /*estilo do riscado */

Obs: Se não funcionar basta colar o código mais para cima, por exemplo, em cima do código de ocultar a navbar.

Se precisar use a tabela de cores Tabela de cores.


Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

7 comentários:

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!