Usando o "letter spacing" em links hover


Boa noite leitoras!
(falo leitoras porque quase todos os seguidores são mulheres, mas todos são bem vindos!)
Eu sei que fiz pouquíssimas postagens esses últimos dias, mas sabem como é, final de ano, escola corrida e ainda por cima não encontrei nenhuma nova postadora que se enquadrasse no perfil do VM 
~felling like a lady~ 

Anyway, trouxe um tutorial para vocês que como o título já diz, é o letter spacing nos links em hover. Não sabe do que eu estou falando?
Normal:

Hover:

É bem simples, na verdade, basta prestar um pouquinho de atenção!

Primeiro vá no seu HTML e procure poa:hover {
Apareceram vários resultados não? Cole o código abaixo no primeiro resultado e antes das chaves se fecharem ( antes de } e depois de { ).

letter-spacing: 1px;
Se quiser mais espaço entre as letras é só aumentar o valor em px.

Agora, um efeito também muito legal, que utiliza quase o mesmo código, é para deixar o hover encolhido. Para fazer isso, é muito simples! Procure por a:hover { ( mesma tag usada para separar as letras) e cole antes de fechar a chave isso aqui:

letter-spacing: -1px;
Os valores negativos, em vez de afastar as letras, encolhe-as. 

Agora se você quiser colocar qualquer um dos efeitos acima no título da postagem basta procurar por 


h3.post-title a:hover {

Devido a variação dos HTML(s), se você não encontrar o código acima, procure por:

.post h3 strong, .post h3 a:hover { 

Caso você não ache nenhum dos anteriores, procure por h3 e vai passando pelas opções até que apareça uma linha onde tenha post, h3 e hover (sem as vírgulas e não precisa ser nessa ordem, necessáriamente).

O que acharam do tutorial? Bem explicado? Tenho tentado melhor os meus tutoriais, achei que estavam meio confusos!





0 leitores soltaram o verbo:

Postar um comentário

Leia, é importante!

- Todos os comentários serão lidos e quando possível, respondidos;
- Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
- No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
- Encomendas e pedidos deverão ser feitos na Ask (menu).

Obrigada por comentar e volte sempre!