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.


5 comentários:

  1. Adorei!
    http://devushkinha.blogspot.com

    ResponderExcluir
  2. Obrigado
    http://photographydayoficial.blogspot.com/

    ResponderExcluir
  3. Muito útil!
    cafecomliivro.blogspot.com

    ResponderExcluir
  4. Amei, deu para personalizar bastante meus posts ♥
    crazy-landia.blogspot.com.br

    ResponderExcluir
  5. Obrigada pelo tutorial! Me ajudou mt! =D
    Deus abençoe!
    http://resgatadapelorei.blogspot.com.br/

    ResponderExcluir

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!