05 agosto 2012

Negrito, itálico e sublinhado com efeito hover transition

Oi gente!
Primeira postagem do blog, um tutorial. Vou ensinar a deixar o negrito, itálico e sublinhado com efeito hover. Não sabe o que é? É assim: passe o mouse em cima desses 3 e verá que muda de cor. Observe:
Negrito, itálico, sublinhado
Não dá um ar de especial no blog? Então vamos aprender!
Os créditos do tutorial vão ao Plush Bomb.
1- Vá em Editar HTML, tecle Ctrl + F e procure por body {
2- Copie o código abaixo e cole depois da chave que fecha body { (no caso, é esta: })
/*formatação -normal sem o mouse*/
b, strong, bold { color: #9ACD32; -webkit-transition-duration: .80s}
s, strike { color: #FF7F00; -webkit-transition-duration: .80s}
u, underline { color: #00CED1; border-bottom: 1px dashed #7FFF00; text-decoration: none; -webkit-
transition-duration: .80s}i, em, italic { color: #FF3E96; -webkit-transition-duration: .80s}
/*formatação hover -quando passa o mouse por cima*/
u:hover { color: #9400D3; border-bottom: 1px solid #FF3030; text-decoration: none; -webkit-transition-
duration: .80s}b:hover { color: #FF6347; -webkit-transition-duration: .80s}
s:hover { color: #4876FF; -webkit-transition-duration: .80s}
i:hover { color: #FFD700; -webkit-transition-duration: .80s}
O que está em negrito são as cores, que você pode alterar utilizando o Color Picker ou, até mesmo, se preferir, utilizando uma tabela de cores.
Xoxo...

22 comentários:

  1. Eu já conhecia, esse tutorial é otimo ^^
    Sobre teu pedido de tutorial, pede na abinha peça no canto para eu não esquecer. :3
    #http://garotadoolharsincero.blogspot.com/

    ResponderExcluir
    Respostas
    1. rs, dá um ar especial ao blog ^^
      Claro, irei pedir o tutorial agora mesmo e irei aguardar.
      Beijoos'

      Excluir
  2. Eu já conhecia esse tuto, inclusive uso no meu blog!!
    Ele é muito fofo *--*
    Flor, adorei o blog e sei que muitas coisas ainda estão por vir.
    Já estou seguindo, se gostar do meu segue de volta? Ia adorar te ver lá...
    BEIJÃOO.

    http://modaetutorial.blogspot.com

    ResponderExcluir
    Respostas
    1. Claro fofinha, vou seguir!
      Beijuus
      Luh

      Excluir
  3. Adorei o tutorial, o efeito fica lindo!
    Amei seu blog, estou seguindo.
    http://victory-blog1.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn, obrigada! Já estou seguindo seu blog.
      Beijos
      Luh

      Excluir
  4. Adorei o tutorial (: e parabéns seu blog é lindo ,estou seguindo , ei de uma visitinha no meu blog tem post novo ;D
    ah ,e quase ia me esqueçendo , sempre voltarei aqui no seu blog :D
    http://faahsantos.blogspot.com/
    ( se puder curta nossa página no facebook)

    ResponderExcluir
  5. Fofa, amei seu blog também, visitei seu blog e segui, mas não posso curtir a página no Facebook, tá flor?
    Bjs
    Luh

    ResponderExcluir
  6. Linda, amei aqui, me encantei de primeira vista! Já estou seguindo, viu? E se quiser parceria ou afiliação... Bjs!
    #Pequena Garota

    ResponderExcluir
    Respostas
    1. Obrigada! Aceito sim, parceria e afiliação. Afiliação precisa de mais de 50 seguidores, você tem? Já a parceria, há vagas ilimitadas. Faço com todos *u*
      Beeijos
      Luh

      Excluir
  7. Eu amo personalizado com hover \o

    Obrigada por comentar no CS, volte sempre! Beijos

    cupcakeofshine.blogspot.com

    /Mitchie

    ResponderExcluir
    Respostas
    1. Somos duas!
      Ah, e de nada, o CS merece mesmo.
      Beijos
      Luh

      Excluir
  8. Eu adorei o tutu guria!
    É sempre bom personalizar cada cantinho do blog *--*

    ResponderExcluir
  9. adorei e fica bem legal efeitos assim http://senhoritajosiane.blogspot.com.br/

    ResponderExcluir
  10. muito bom o tuto, o resultado ficou muito legal xD
    spaziodm.com

    ResponderExcluir
  11. personalizaçao é sempre bem vinda luh você sabe que dia é hoje ? se não sabe da uma passadinha no BP
    eu vou adorar sua visita bjus http://blogdapepi.blogspot.com.br/
    Blog da Pepi

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Ah, e eu sabia sim, dia do solteiro, para nós :3
      Beeijos'
      Luh

      Excluir
  12. Oi linda,amei a postagem,você escreve muito bem viu? ótima blogueira :)) passa lá pelo blog? http://amigaquefashion.blogspot.com.br/ *--*

    ResponderExcluir
    Respostas
    1. Obrigada! Que bom que gostou. Obrigada pelos elogios, linda! :)
      Vou dar uma passadinha ;)
      Bjs
      Luh

      Excluir