19/08/2012

Negrito, Itálico, e Sublinhado com efeito Hover [002]


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:

Códigos
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.

Códigos
/*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}


-drwendys.tumblr.com-

Visualize se não deu erro e salve!

4 comentários:

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345