03/01/2013

Tutorial: Efeito hover no Negrito, Itálico, Sublinhado e Tachado com estilos de ponteiro

||
Konbanwa meus bunnys travesos, como vão? Aposto que todos vocês já viram em vários blogs com aquele tutorial Negrito, Itálico e Sublinhado automático, mais o que percebi que não tinha como personalizar o Tachado. Eu fiz de duas formas o automatico e com efeito hover também, se quiser aprender como faz já sabe a onde ir.

Primeiro vá ate seu HTML e então procure por ]]></b:skin>
Assim que acha-lo adicione o proximo codigo acima dele:

b {color: #f08080; text-decoration: none;} /* O Negrito */
i {color: #ff7f50; text-decoration: none;} /* O Itálico */
u {color: #ffca85; text-decoration: none;
border-bottom: 1px dashed #ffca85;} /* O Sublinhado */
s, strike { color: #99aaff; cursor: normal; } /*O Riscado*/

Mas se quer ele hover, esta o codigo, ele é aplicado da mesma que o de cima:

    b {color: #F08080; text-decoration: none;} /*Negrito */
    b:hover { cursor: help; color: #FF6347;}

    i {color: #FF7F50; text-decoration: none;} /* Itálico */
    i:hover { cursor:  help; color: #FF6347;}

    u {color: #F08080; text-decoration: none;
    border-bottom: 1px dashed #FF6347;} /* Sublinhado */
    u:hover {cursor:  help ; color: #FF6347;
    border-bottom: dashed 1px #FF6347; text-decoration: none; }

Estilos de ponteiros do mouse:

Crosshair (cruz)
Default (seta)
E-resize (seta que aponta à direita)
Help (ponto de interrogação)
Move (cruz com setas nas extremidades)
N-resize (seta que aponta para cima)
Pointer (mão)

Caso não quiser seta , basta colocar None onde diz Help no código.

25 comentários:

  1. Bem simples e útil, né?

    Abraços,
    http://therevolucaonerd.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo Victhor quanto tempo, verdade e bem útil rsrs

      Excluir
  2. adoro esse blog, sempre me ajuda. Obrigada s2

    http://segredos-deamigas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ohayoo fico feliz que lhe ajude, obrigada pelo recadinho

      Excluir
  3. Seu blog é lindíssimo!
    Comenta e segue o meu tb:
    nossoblogdemodaa.blogspot.com

    ResponderExcluir
    Respostas
    1. Yo Tainá, pode deixar que farei sim uma visitinha ^^

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Muito obrigada, fico feliz por poder ajudar :3

      Excluir
  5. Amei o post!
    Quer dizer, afiliado :D

    ResponderExcluir
  6. Respostas
    1. Serio? D: Puxa... tenta mais uma vez.

      Excluir
  7. Obrigada!!!!
    Poderia dar uma olhada no meu blog?
    http://empirefolles.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Por nada, faço sim uma visitinha.

      Excluir
  8. Amei o tuto, me ajudou muito beijos.
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
    Respostas
    1. Ah que bom! É um prazer lhe ajudar linda, beijinhos.

      Excluir
  9. Me ajudou muito! Obrigada <3
    Amei seu lay =3

    Beijos | Cupcake of Sugar

    ResponderExcluir
    Respostas
    1. Obrigada por gostar do lay *----------*

      Excluir
  10. Amei o tuto! Me ajudou muito *-*
    mythings2.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom, fico feliz em poder ajudar. :3

      Excluir

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