19/08/2012

Tutorial: Como colocar Negrito, Itálico, e Sublinhado com efeito Hover

||
-drwendys.tumblr.com-

Yo, como vão todos vocês? Espero que bem. Bom trago agora um tutu bem legal para vocês, já postei como deixar o negrito, itálico e sublinhado coloridos, agora mostrarei com efeito hover. Se não sabe o que é isso, e efeito de quando passa o mouse por cima e ele muda para outra cor ou imagem, como o que irei mostrar aqui e quando passarem o mouse por cima de algum negrito, itálico ou sublinhado ele ira mudar de cor, e quando a pessoa tirar ele voltara ao normal.

Agora vamos lá! Dentro de seu HTML procure por ]]></b:skin> e acima dele cole isso:

b {color: #B03060; text-decoration: none;} /* Estilo do negrito */ b:hover {color: #000000; text-decoration: none;} /* Estilo hover do negrito */ i {color: #68228B; text-decoration: none;} /* Estilo do italico */ i:hover {color: #FF83FA; text-decoration: none;} /* Estilo hover do italico */ u {color: #9C9C9C; text-decoration: none; border-bottom: 1px dashed #1C1C1C;} /* Estilo do sublinhado */ u:hover {color: #CD5555; text-decoration: none; border-bottom: 1px dashed #CD0000;} /* Estilo hover do sublinhado */

Personalize da forma que você desejar. Também tem a outra forma de colocar, dentro de seu HTML procure por  body { , cole p codigo depois dele logo após a chave que fecha body.

/*Normal sem o mouse*/
 b, strong, bold {
 color: #9ACD32; -webkit-transition-duration: .80s}
 s, strike {
 color: #FF6347; -webkit-transition-duration: .80s}
 u, underline {
 color: #00CED1; border-bottom: 1px dashed #551A8B;
 text-decoration: none; -webkit-transition-duration: .80s}
 i, em, italic {
 color: #FF3E96; -webkit-transition-duration: .80s}
 /*Ao passa o mouse por cima*/
 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}

Vizualise se não deu erro e salve!

4 comentários:

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram