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

38 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. Amei, não sabia essa! Valeu!!

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

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

    ResponderExcluir
  5. 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
  6. 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
  7. Woah, adorei ! Principalmente o negrito. Ajudou bastante :3
    Ichiban Ippai

    ResponderExcluir
  8. 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
  9. Muito legal o tuto querida.Amei seu blog e estou seguindo :)
    BEIJO
    FATOS INOCENTES
    http://blog-moderninho.blogspot.com.br/

    ResponderExcluir
  10. 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
  11. 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
  12. Amei o blog e as dicas de tuto! Lindo!
    beijo

    elaacredita.blogspot.com

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

    Kissus ;3
    Just Tonight

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

    BarbieLicious Pink

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

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

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

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

    ResponderExcluir
  19. ó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
  20. Ah, gosteeei! Vou deixar salvo o tutorial, pra quando precisar usar :)

    Beijo
    Sem querer me intrometer

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


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

    ResponderExcluir
  22. 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
  23. 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
  24. Super,Amei ^^
    http://geinmars.blogspot.com.br/

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

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

    ResponderExcluir
  26. 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
  27. 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
  28. Adorei o blog, muito lindo, amei tudo. Parabéns, vou sempre estar por aqui.

    ontendency.blogspot.com

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

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

    ResponderExcluir
  30. 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
  31. Deu certooo (wwiiii) o resultado é lindoo (:
    Seguindo aqui flor segue de volta ?
    ~ nosnopc.blogspot.com
    Beijus

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

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

    coffemilia.blogspot.com

    ResponderExcluir