24/05/12

Tutorial - Negrito, itálico, sublinhado e riscado com efeito hover


Oi :) 
Hoje vou ensinar a personalizar o negrito, itálico, sublinhado e riscado.


Vê como fica :


Sem o rato em cima

Com o rato em cima ( hover )

Para fazeres vai ao html - ctrl + f - procura por body {

Agora, cola o código como diz na imagem :


/*formatação*/
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*/
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}


Vamos entender o código : o "b" é o negrito, o "s" é o riscado, o "u" é sublinhado e o "i" é itálico. Onde diz " formatação" é a cor sem o rato por cima e onde diz "formatação hover" é com o rato por cima.
Basta alterar as cores com esta tabela onde diz "color :"

Se não quiseres com hover basta apagar a partir de "formação hover".




Gostaram ?

7 comentários:

  1. Gostei muito :)
    Blog: http://mafa-stardoll.blogspot.pt/

    ResponderEliminar
  2. Vamos lá tentar fazer kkkkkkk, obrigada CAT
    :)
    encantosdeumaadolescente.blogspot.com

    ResponderEliminar
  3. Adoreei! Vou tentar fazer ;3
    Bjos Juh

    www.beaut1ful-angel.blogspot.com

    ResponderEliminar
  4. OOi^^
    Que legal seu blog, muito criativo!
    Adorei as postagens, sem falar desse design, que é um luxoo :3
    Você aceitaria visitar meu blog? Se gostar me ajuda a chegar a meta de 500 seguidores?
    Obrigada pela coompreenção!
    Beijos!
    -->Imastoryne

    ResponderEliminar
  5. Oiiie amg! To de lay novo! Passa no mg, http://missglamur.blogspot.com.br/

    ResponderEliminar
  6. aaaaaaí , Muito obrigada por postar esse tutoriail, está precisando muito, estou usando no meu novo Lay , e vou usar no proximo também, Beijôs

    Linhas-corrigidas.blogspot.com.br

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias