Negrito, Itálico, Sublinhado e Riscado

Todos vocês já viram em vários blogs esse tuto..Negrito, Itálico e Sublinhado automático, mais nos que eu vi não tinha como personalizar o Riscado..pois aqui tem (wiiiiiiiiiii) e tem efeito hover também, se quiser aprender como faz é só continuar lendo meus xuxuzinhos de cerca preferidos.
Agradeço por todos os recadinhos e sejam bem-vindos os novos seguidores :)
Ah muita gente me perguntou onde peguei as imagens do post anterior..a maioria foi desse tumblr Kpop & Ulzzang



Vá em  Design  Editar HTML  Ctrl F e procure por: ]]></b:skin> 
ao encontrar..Cole este código acima dele: 

b {color: #ff78a0; text-decoration: none;} /* Estilo negrito */
i {color: #80c3ff; text-decoration: none;} /* Estilo  itálico */
u {color: #ffca85; text-decoration: none;
border-bottom: 1px dashed #ffca85;} /* Estilo sublinhado */
s, strike { color: #99aaff; cursor: normal; } /*Estilo  Riscado*/

Pode usar com efeito hover olha só:
b {color: #ff219f; text-decoration: none;} /* Estilo do negrito */
b:hover { cursor: crosshair; color: #000;}

i {color: #d6aef5; text-decoration: none;} /* Estilo do itálico */
i:hover { cursor: crosshair; color: #000;}

u {color: #6dd2f7; text-decoration: none;
border-bottom: 1px dashed #6dd2f7;} /* Estilo do sublinhado */
u:hover {cursor: crosshair ; color: #000;
border-bottom: dashed 1px #000; text-decoration: none; }
Edite como quiser:

Tabela de cores aqui

Alguns 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)

Se não quiser seta diferente basta colocar None onde diz Crosshair no código
 Estilos de borda: (nome da borda esta em rosa)

border: 2px outset #ff5e9f

border: 3px inset #FFFF99

border: 4px ridge #46c74e

border: 3px groove #eded58

border: 4px double #FF0000

border: 1px solid #ed574c

border: 2px dashed #6a55ed

border: 2px dotted #919191

39 comentários:

  1. Ótimo tutorial, realmente nunca tinha visto um que ensinasse a personalizar o tachado...
    Abç

    http://adraftbox.blogspot.com.br/

    ResponderExcluir
  2. Caramba, realmente eu nunca vi em outro lugar, mais também não poderia ser em outro lugar né tinha que ser aqui :)

    Poxa desculpa mesmo por a Victória ter colocado seu background mais fala com ela que ela tira,rs.

    E muuuuuuuuuuito obrigada por mostrar os estilos diferentes de bordas porque eu não aguentava mais o dashed,solid,double, etc rs.

    Beijiiinhos
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  3. Tuto show, como sempre flor!

    bjãoo

    ResponderExcluir
  4. Amei, não sabia essa! Valeu!!

    ~ http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  5. Ótimo tutorial,bem explicado.
    http://i-teenbr.net.tc

    ResponderExcluir
  6. AW, seu blog é tão kawaii *w*

    Parabéns pelo tutorial e por esse blog fofíssimo né?

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  7. Oi, flor! Ameeeeei o tuto, tava querendo saber a um tempão como fazer isso! O seu blog é tão lindo! haha, vou seguir! Beeeijo!

    http://space4girl.blogspot.com.br/

    ResponderExcluir
  8. Woah, adorei ! Principalmente o negrito. Ajudou bastante :3
    Ichiban Ippai

    ResponderExcluir
  9. Yo! x3

    Owna!adorei *---* já conhecia este tutorial, ele é muito útil né ;D
    Já conhecia todas as bordas, menos o outset o.O

    Bye~
    http://roseof-pain.blogspot.com.br/

    ResponderExcluir
  10. Muito legal o tuto querida.Amei seu blog e estou seguindo :)
    BEIJO
    FATOS INOCENTES
    http://blog-moderninho.blogspot.com.br/

    ResponderExcluir
  11. Adorei o post fofa. Gostaria de divulgar o concurso que estou fazendo para saber mais entre em http://cantinhodavitoriaeturma.blogspot.com.br/2012/05/feliz-dia-das-maesconcurso-especial-com.html
    Bjs fiquem com Deus

    ResponderExcluir
  12. Nossa Kaakah <33 Super lindo o tutorial \õ Vc poderia ensinar como fazer esse efeito hover em qualquer palavra? Tipo, na palavra que eu quiser? Bezões Luuh
    Rawr Girl ~> teenstyle.com

    ResponderExcluir
  13. Amei o blog e as dicas de tuto! Lindo!
    beijo

    elaacredita.blogspot.com

    ResponderExcluir
  14. Adorei o tuto, o blog fica bem mais bonito quando se usa esse tutorial.

    Kissus ;3
    Just Tonight

    ResponderExcluir
  15. Adorei o tutorial amore bem completo!!
    Uma boa semana
    xoxo

    BarbieLicious Pink

    ResponderExcluir
  16. Muito legal o tutorial amore, amei <3

    ResponderExcluir
  17. Hey!
    Acabei de conhcecer seu blog, e AMEI! Visita meu blog, e se gostar segue?
    aushaush
    Bjs

    ResponderExcluir
  18. Ah, meu blog é o minha-vida-resumida.blogspot.com/

    ResponderExcluir
  19. que tutu legal! vale a pena investir nos detalhes ne? beijo
    http://kelly-club.blogspot.com.br

    ResponderExcluir
  20. ótimo tutorial, pra quem tem dúvidas, isso salva!! E COMO! Hahahah. Adorei o seu Blog! Hahahha e já segui! Não deixe de seguir o Descontroladas! Beijos adm.
    Laissa
    http://tabathamesquita.blogspot.com.br

    ResponderExcluir
  21. Ah, gosteeei! Vou deixar salvo o tutorial, pra quando precisar usar :)

    Beijo
    Sem querer me intrometer

    ResponderExcluir
  22. Adorei o tutu, super bem explicado, vou ver se uso no meu proximo lay.


    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  23. Muito legal o tutorial, e fica super fofo. Linda adorei seu blog ele é suuuuuuuuuper fofo e lindo, se você puder visitar o meu eu ficaria muito feliz.bjs
    http://blogbondmais.blogspot.com

    ResponderExcluir
  24. Muito legal seu blog, superfofo!
    Adorei ele!
    Super lindaooo!
    Ja estou seguindo e queria sua colaboração para seguir o meu também!
    Oq acha
    Entra nele!
    Eh pq assim, o seu tem mais de 200 mas vc deve saber pq um dia o seu tbm teve 11, 10, 5...
    Eu agradeco pelo meu blog ter 11 mas cada seguidor, eh como um presente pra mim que eu nao quero NUNCA perder!
    E... tambem ta tendo um joguinho la... vai
    bjs
    http://meublogblogueiro.blogspot.com.br/

    ResponderExcluir
  25. Super,Amei ^^
    http://geinmars.blogspot.com.br/

    ResponderExcluir
  26. Super tuto,nunca tinha visto..
    Estou seguindo aqui,espero que me siga:

    http://coisasdagiovanna.blogspot.com.br/

    ResponderExcluir
  27. Uau! Que blog lindo,conheci agora através do Nerds Feras e já estou seguindo pra aprender mais html. Eu sou péssima nisso rsrs
    http://desconstruindoaspalavras.blogspot.com.br/

    ResponderExcluir
  28. nossa adorei o tuto super fácil ! e é muito bonitinho *w* nossa que blog super lindo ! como consegue ?? seu blog é mtt lindo ou o meu e que é feio kkk’ da um pulinho no meu blog... Lá no fluffy girl

    ResponderExcluir
  29. Adorei o blog, muito lindo, amei tudo. Parabéns, vou sempre estar por aqui.

    ontendency.blogspot.com

    ResponderExcluir
  30. Que legal o tutorial e pode ser bastante utilizado.

    Seguindo aqui, gostei do teu espaço, é bem fofo.
    http://iasmincruz.blogspot.com.br/

    ResponderExcluir
  31. AAhhh, te agradeço eternamente por esse tutorial. Precisava muito dele para destacar algumas coisas, e os outros não estavam funcionando. Realmente ajudou!

    Continuo agradecendo, viu?

    purplecat.com.br

    ResponderExcluir
  32. Deu certooo (wwiiii) o resultado é lindoo (:
    Seguindo aqui flor segue de volta ?
    ~ nosnopc.blogspot.com
    Beijus

    ResponderExcluir
  33. Adorei! Tô usando lá no blog :)) Seguindo aqui
    Beijos,
    --> siimsenhorita.tk

    ResponderExcluir
  34. Puxa !!
    Obg pelo tutu, me ajudou mtoooooo!!!
    Seguindo aqui, visita??

    coffemilia.blogspot.com

    ResponderExcluir