6.7.16

Text Decoration Personalizado Com Efeito Hover

| |
Oi, pessoal!

Que saudades daqui <3 Agora que eu finalmente estou de férias, espero ter tempo para postar com maior frequência. Inclusive, andei pensando em posts futuros aqui. Também fiz um "sketch" para um novo layout, mas adivinha quem conseguiu perder o papel do desenho ¬¬ De qualquer forma, vou ver se consigo lembrar minhas ideias e começar o layout hoje ou amanhã ^^

Hoje, ensinarei como colocar negrito, itálico, sublinhado e tachado automaticamente coloridos, e com efeito hover ao passar o mouse, como temos aqui no blog. É um tutorial bem simples, só um pouco chatinho na hora de personalizar, já que as cores são identificadas por códigos.

Let's go!


Abra seu HTML e pesquise por ]]></b:skin>. Acima disto, coloque:
b{color: #xxx; text-decoration: none;}
b:hover {color: #xxx; text-decoration: none;}
i {color: #xxx; text-decoration: none;}
i:hover {color: #xxx; text-decoration: none;}
u {color: #xxx; text-decoration: none; border-bottom: 1px dashed #xxx;}
u:hover {color: #xxx; text-decoration: none; border-bottom: 1px dashed #xxx;}
strike {color: #xxx; text-decoration: strike; }
strike:hover {color: #xxx; text-decoration: strike; }
Agora, vamos entender o código.

b {...}, i {...} e strike {...} se referem, respectivamente, a negrito, itálico e tachado normais. Dentro de cada chave, há #xxx, que se refere à cor de cada estilo, que deverá ser alterado de acordo com a sua preferência para cada caso.

b:hover {...}, i:hover {...} e strike:hover {...} se referem, respectivamente, a negrito, itálico e tachado hover. Assim como no caso anterior, temos #xxx em cada chave, que devem ser substituídos por cores diferentes das tags normais para que ocorra a transição.

u {...} se refere ao sublinhado, o mais enjoadinho por ter três etapas de modificação. A primeira é color: #xxx, que, assim como nos outros casos, é a cor do texto. Em seguida, há 1px dashed. 1px é a medida do sublinhado abaixo do texto - recomendo que não a altere - e dashed se refere ao sublinhado de "risquinhos". Você pode substituir "dashed" por "dotted", caso queira um pontilhado, ou "solid" , caso queira uma linha. Por último, há mais um #xxx, que se refere à cor do sublinhado.

Por fim, u:hover {...} se refere ao sublinhado em hover. Também enjoadinho, segue as mesmas regras do parágrafo acima.
Quanto à tabela de cores para a codificação, tem essa aqui, mas prefiro usar a seleção de cores de editores de imagem pela maior quantidade de opções. Também recomendo modificar os códigos no Word, do jeitinho que deixei ali, e colocar no HTML depois de editado. Deste jeito, você não vai se perder ^^
Espero que tenha sido útil <3 Se houver alguma dúvida, não tenha medo de deixar nos comentários~

~Abraços!

Edit: caso queira transição suave / mais lenta, use este código:

b{color: #xxx; text-decoration: none; transition-duration: 0.5s;}
b:hover {color: #xxx; text-decoration: none; transition-duration: 0.5s;}
i {color: #xxx; text-decoration: none; transition-duration: 0.5s;}
i:hover {color: #xxx; text-decoration: none; transition-duration: 0.5s;}
u {color: #xxx; text-decoration: none; border-bottom: 1px dashed #xxx; transition-duration: 0.5s;}
u:hover {color: #xxx; text-decoration: none; border-bottom: 1px dashed #xxx; transition-duration: 0.5s;}
strike {color: #xxx; text-decoration: strike; transition-duration: 0.5s;}
strike:hover {color: #xxx; text-decoration: strike; transition-duration: 0.5s;}

Edit²: também tem como colocar o sublinhado em uma caixinha, como no exemplo abaixo:
Para isso, substitua a linha do sublinhado por:
u {background: #xxx; border-radius: 2px; color: #xxx; text-decoration: none; transition-duration: 0.5s;}
u:hover {background: #xxx; border-radius: 2px; color: #xxx; text-decoration: none; transition-duration: 0.5s;}
Altere o código em negrito pela cor do fundo. Border-radius é a bordinha meio arredondada (se não quiser apague a linha; se quiser mais arredondado, aumente o número). O código sublinhado é a cor da fonte (aconselho deixar da mesma cor do fundo da área do post).

2 comentários:

  1. Que bom que terá mais tempo para postar! Sério, eu fico muito feliz em saber <3
    Faz muito tempo que tenho o meu layout, por isso, nem lembro como fiz para descobrir o código das cores, auehaue, mas como você disse, o tutorial é fácil tirando esse código das cores e o texto decorado assim fica muito mais lindo!

    { Barbie Pretty Sweet }

    ResponderExcluir
    Respostas
    1. Que bom <3
      Sim, só essa parte é chatinha >< Verdade, o blog fica mais colorido hahaha

      ~Abraços!

      Excluir

>> Leia o post antes de comentar;
>> Pedir sdv é deselegante, comente sobre a postagem e então deixe seu link no final do post;
>> Se quiser afiliação, peça por aqui mesmo. Mas peço que assuma o compromisso de me colocar em sua elite, atualizar o seu blog e acompanhar o meu;