22 de jun de 2012

Negrito, sublinhado,itálico e riscado com efeito hover

               
Heey gurias e guris, vim ensinar um tutorial bem simples de como deixar o negrito,sublinhado, itálico riscado com efeito hover obvio como diz o título do post.

- Vá no seu Design > Editar HTML > Dê um CTRL + F e procure por:


 body {


Você vai encontra algo parecido com isso:


font: $ (body.fonte);
color: $ (body.text.color);
background:  $ (body.backaground);



E abaixo dessa } você cola esse código:



/*formatação*/
b, strong, bold { color: #9ACD32; -webkit-transition-duration: .80s}
s, strike { color: #FF7F00; -webkit-transition-duration: .80s}
u, underline { color: #00CED1; border-bottom: 1px dashed #7FFF00; text-decoration: none; -webkit-transition-duration: .80s}
i, em, italic { color: #FF3E96; -webkit-transition-duration: .80s}
/*formatação hover*/
u:hover { color: #9400D3; border-bottom: 1px solid #FF3030; text-decoration: none; -webkit-transition-duration: .80s}
b:hover { color: #FF6347; -webkit-transition-duration: .80s}
s:hover { color: #4876FF; -webkit-transition-duration: .80s}
i:hover { color: #FFD700; -webkit-transition-duration: .80s}

Entenda o código:

B é negrito
S é riscado
U é sublinhado
I é itálico
E onde está de rosa é o código das cores, que você pode alterar usando essa tabela aqui.
Se você não quiser com hover é só apagar o código a partir de  /*formatação hover*/
Créditos: Morangos também falam.

4 comentários:

  1. Muito fofo esse efeito!
    encantosdeumaadolescente.blogspot.com

    ResponderExcluir
  2. Uso esse efeito no SB, é muito fofo *-* Obrigada pela visita! Bjuu †
    http://sweetbomb-anaa.blogspot.com.br/

    ResponderExcluir
  3. Como você colocou esses "botãozinhos" escrito folow e dashboard?

    ResponderExcluir

Leia as regras,antes de comentar.Por favor!
1- Comentários do tipo "seguindo,segue de volta",Adoro teu blog, e não fala nada sobre a postagem, ou xingamentos. Serão,totalmente ignorados.
2-Retribuo comentários.
3-Pedido pra seguir,o seu blog,sem seguir o meu ,não irei seguir o seu também não.
3-Aceito críticas construtivas,para o bem do blog,não ofensas.
4-Aceito "inspirações",mas credite.
5-Comente a vontade,você faz um blogueiro feliz!