04/02/2013

Tutorial : Negrito, Itálico e Sublinhado em Hover

Oi again ^^
Como tinha dito na última postagem, estou trazendo o tutorial do negrito, itálico e sublinhado em hover.
Repare que quando você passa o mouse em cima deles, a cor muda e o sublinhado fica com um traço reto.
Vamos lá?

Vá no seu CSS e cole o código abaixo:

b {color:#99CDDF; padding: 0 2px 0 2px;} /*negrito*/
b:hover {color:#1c1c1c;} /*Negrito quando o mouse passar por cima*/
i {color:#000000; line-height: 12px;} /* Itálico*/
i:hover {color:#FFA579;} /*Itálico quando passar por cima */
u {border-bottom: 1px solid #99CDDF; text-decoration: none;} /*Tracinho do sublinhado*/
u:hover {border-bottom: 1px solid #FFA579; text-decoration: none;} /*Tracinho do sublinhado quando o mouse passar por cima*/

Clique aqui para ver a tabela de cores.

Agora você vai ter que personalizar do jeito que você quiser. Se você nãoentendeu ou não sabe como personalizar, siga o tutorial detalhado abaixo:

Negrito:
Onde está escrito #99CDDF é a cor que vai ficar automaticamente o negrito quando você publicar.
-Como assim?
Simples. Quando você estiver escrevendo sua postagem e deixar alguma palavra em negrito, ela vai ficar preta. A cor só aparece quando você publicar.
Para colocar uma cor diferente, vá na tabela de cores e copie o Código HTML da cor que você escolher.
Na segunda linha, onde está escrito #1c1c1c, é a cor que vai ficar quando você passar o mouse em cima do negrito.

Não vou colocar o do Itálico nem do Sublinhado, porque é a mesma coisa do Negrito.

TIPOS DE SUBLINHADO: ENTENDA!
Existem quatro tipos de sublinhado, você pode escolher o seu e modificar no código: solid (que é a linha reta), dashed (que é a linha tracejada), dotted (que é uma linha formada por vários pontinhos) e double (que corresponde a duas linhas) Você pode colocar o dashed, por exemplo, como seu sublinhado automático, e o double como seu sublinhado quando você passa o mouse em cima.

Os créditos vão ao blog Risosshi.
Qualquer dúvida, comente :)


9 comentários:

  1. Amei o tutorial e sobre seu blog, está ficando uma graça, porque você não usa uns tutoriais que temos postados no blog para finalizá-lo? Ein?

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Brigada ^^
      eu tento, tento, e tento, mas eu tinha que ter um novo layout, pra combinar com algumas coisas. amo sua criatividade, e admiro ela.. você num pode mesmo fazer um pra mim ? :S

      Excluir
    2. kkkkkkk, ai meu Deus, nada a ver, mas sobre a criatividade somos eu e a Megan, pois duas cabeças pensam melhor, ok, me convenceu, kkkk, tem facebook ou alguma rede social para que você possa dizer as cores ou quem você quer no layout?

      Excluir
    3. yeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeey!! uhhuu ! tenho sim, mas não tenho tempo de postar agora, amanha eu posto ok? se servir, ta ai meu email:
      lumaju94@hotmail.com
      beijoooooooooos

      Excluir
    4. respondi seu e-mail lá, quando puder responde tá :D

      Excluir
  2. Olha amore, irei fazer o template em um blog teste aqui meu tá, aí quando ele estiver quase terminado passo para o seu blog, assim fica mais fácil, pois o seu layout está com alguns errinhos no HTML, aí por enquanto você não irá ver nenhuma modificação no seu template ok? ^^

    ResponderExcluir
    Respostas
    1. sem problemas *--* só não quero que fique muito pra você fazer..

      Excluir
  3. Oi!
    Estou com um problema no meu site: as palavras em negrito e itálico não aparecem nas postagens...
    Você pode me ajudar?
    Obrigada!
    Dani

    ResponderExcluir

Comente o que quiser, contando que siga essas regras:
♥ Não fale coisas que possam ofender alguém
♥ Comente sobre o post primeiro, e depois deixe o seu recado.
♥ Os comentários que cotenham "Seguindo, segue de volta" serão ignorados.
♥ Seja feliz :)