03/01/2013

Negrito, Itálico, Sublinhado e Tachado com estilos de ponteiro [003]


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 automático 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 próximo código acima dele:

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

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

23 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. Anônimo9/11/13

    Este comentário foi removido pelo autor.

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

      Excluir
  5. Anônimo9/11/13

    Amei o post!
    Quer dizer, afiliado :D

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

    ResponderExcluir
  7. Anônimo10/5/14

    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
  8. Me ajudou muito! Obrigada <3
    Amei seu lay =3

    Beijos | Cupcake of Sugar

    ResponderExcluir
  9. Amei o tuto! Me ajudou muito *-*
    mythings2.blogspot.com

    ResponderExcluir

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