CSS :hover + transition
Olá povo,
Minha passagem hoje por aqui será breve, mas não menos interessante. Acredito que é fácil descobrir como usar CSS e HTML, por isso prefiro focar em boas práticas e dicas avançadas, e a dica de hoje será como usar o ":hover" em conjunto com o "transition".
(Lembrando a minha didática: primeiro a solução para os mais avançados e depois o problema/explicação)
Solução (Dica):
<style>
body:hover a {
transition: 1s;
}
a:hover {
background: ...;
color: ...:
}
<style>
Use o :hover+transition em contêineres antes do elemento que você deseja usar o :hover, porem, por questões de hereditariedade de propriedades, ainda no seletor do contêiner selecione o elemento que irá ter o "transition" (no exemplo acima "body:hover a").
A Explicação:
Você já reparou que quando você passa o mouse sobre vários links que tem uns efeitos legais, logo depois de tirar o mouse de cima do link ele volta imediatamente para o estado original dele? Ou ainda o elemento tem algo que muda a posição dele, e você poe o mouse na borda do elemento e vê o bicho se mexendo mais rápido do que as morenas dançando o créu na velocidade 5? Isso acontece quando se define o transition dentro do próprio :hover do elemento. Ou normalmente o programador define a propriedade do link (antes de usar o :hover) como "transition", e todos os links ganham a mágica de voltar ao estado original fazendo um efeito bacana... ééééé... funciona.... mas alguém reparou no que acontece em sites responsivos? Parece uma verdadeira festa de criança quando você manda eles se sentarem, é uma confusão só com todo mundo correndo de um lado pra outro, fora a travadinha de tela, e em sites muito elaborados essa travadinha de tela vira um travadão mesmo!
Ver um site se mexendo quando você muda o tamanho da tela faz com que o usuário perceba o que está mudando, isso trás até um efeito positivo para o site, porem eu tenho tido péssimas experiencias com sites usando Smartphones, essa paradinha para redefinir o visual do site vira um engarrafamento na tela do celular demorando muito mais do que deveria.
Para agradar a maioria então, eu recomendo definir o transition dentro de um :hover antes dos elementos que terão algum tipo de efeito. Essa malandragem vai fazer com que o elemento cheio dos efeitos SOMENTE tenha efeito enquanto o mouse estiver dentro do site, quando o mouse estiver fora da tela o elemento cheio dos efeitos perde a propriedade transition e não causa problemas maiores. Simples.
E por hoje é só pessoal!
By Renan Rolo.
Minha passagem hoje por aqui será breve, mas não menos interessante. Acredito que é fácil descobrir como usar CSS e HTML, por isso prefiro focar em boas práticas e dicas avançadas, e a dica de hoje será como usar o ":hover" em conjunto com o "transition".
(Lembrando a minha didática: primeiro a solução para os mais avançados e depois o problema/explicação)
Solução (Dica):
<style>
body:hover a {
transition: 1s;
}
a:hover {
background: ...;
color: ...:
}
<style>
Use o :hover+transition em contêineres antes do elemento que você deseja usar o :hover, porem, por questões de hereditariedade de propriedades, ainda no seletor do contêiner selecione o elemento que irá ter o "transition" (no exemplo acima "body:hover a").
A Explicação:
Você já reparou que quando você passa o mouse sobre vários links que tem uns efeitos legais, logo depois de tirar o mouse de cima do link ele volta imediatamente para o estado original dele? Ou ainda o elemento tem algo que muda a posição dele, e você poe o mouse na borda do elemento e vê o bicho se mexendo mais rápido do que as morenas dançando o créu na velocidade 5? Isso acontece quando se define o transition dentro do próprio :hover do elemento. Ou normalmente o programador define a propriedade do link (antes de usar o :hover) como "transition", e todos os links ganham a mágica de voltar ao estado original fazendo um efeito bacana... ééééé... funciona.... mas alguém reparou no que acontece em sites responsivos? Parece uma verdadeira festa de criança quando você manda eles se sentarem, é uma confusão só com todo mundo correndo de um lado pra outro, fora a travadinha de tela, e em sites muito elaborados essa travadinha de tela vira um travadão mesmo!
Ver um site se mexendo quando você muda o tamanho da tela faz com que o usuário perceba o que está mudando, isso trás até um efeito positivo para o site, porem eu tenho tido péssimas experiencias com sites usando Smartphones, essa paradinha para redefinir o visual do site vira um engarrafamento na tela do celular demorando muito mais do que deveria.
Para agradar a maioria então, eu recomendo definir o transition dentro de um :hover antes dos elementos que terão algum tipo de efeito. Essa malandragem vai fazer com que o elemento cheio dos efeitos SOMENTE tenha efeito enquanto o mouse estiver dentro do site, quando o mouse estiver fora da tela o elemento cheio dos efeitos perde a propriedade transition e não causa problemas maiores. Simples.
E por hoje é só pessoal!
By Renan Rolo.
Comentários
Postar um comentário