Divertindo-se com efeitos de ligação hover
um designer com quem eu trabalho estava apresentando comps em uma reunião de equipe recente. Ela tinha feito um trabalho maravilhoso juntando o conceito para um sistema de design, de componentes a padrões e tudo no meio que faria qualquer desenvolvedor front-end feliz.
mas havia um pequeno detalhe em seu trabalho que me chamou a atenção: o estado de hover para links era um squiggle.
Hein! Não só não tinha visto isso antes, como a ideia nunca me tinha passado pela cabeça. Acontece que há muitos exemplos disso em sites ao vivo, sendo um deles o esboço. Essa foi a implementação que inspirou o design.bem me parecia. Podemos fazer algo como um gradiente de fundo linear ou mesmo uma imagem de fundo. Mas! Não foi o fim do projecto. Acontece que também é animado. Novamente, A partir do Contorno:
Uau! Que loucura. Eu não tinha certeza de como abordar isso, honestamente, porque animar qualquer uma das minhas ideias iniciais seria difícil, especialmente para o suporte cross-browser.então, como é que o contorno o fez? Acontece que é SVG. Podemos fazer um caminho de squiggly e animá-lo muito facilmente:
ver a pen Squiggle de Geoff Graham (@geoffgraham) no CodePen.mas como é que isso funciona com um link? Well, we can use SVG on the background-image property:
See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.mas isso é uma treta, porque não podemos animar isso. Precisamos de melhores valores para isso. No entanto, podemos inline CSS diretamente na SVG na propriedade background-image. Não podemos simplesmente copiar e colar o código SVG para a propriedade, mas podemos com alguma codificação adequada:
ver a pen Squiggle de Geoff Graham (@geoffgraham) no CodePen.
e, uma vez que SVG pode conter seus próprios estilos dentro da marcação, a animação pode ser lançada para lá na propriedade background-image, da mesma forma que faria com CSS em um cabeçalho de documento HTML ou css inline em HTML.
See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.
Podemos Estilo – lo de forma um pouco diferente, se quisermos:
ver o efetivo – Squiggle do Pen Link por Geoff Graham (@geoffgraham) no CodePen.isto é inspirador!
eu não tenho idéia se um squiggle animado faz para uma boa experiência do Usuário e, francamente, esse não é o ponto deste post. O ponto é que o esboço teve uma idéia divertida com uma implementação slick CSS.
isso me fez pensar sobre outros estilos de hover não-padrão (talvez até mesmo não convencional) que podemos fazer com links. Mais uma vez, jogando de lado usabilidade e ter um grande tempo com CSS…
o efeito de Contorno Para fundo
talvez esse mesmo contorno inferior na ligação padrão pode crescer e se tornar o fundo completo da ligação em hover:
See the Pen Link Effectz – Background on hover by Geoff Graham (@geoffgraham) on CodePen.
Heck, we can even do something similar horizontally:
See the Pen Link Effectz – Horizonte Background by Geoff Graham (@geoffgraham) on CodePen.
o efeito de texto delineado
vamos retirar a cor da fonte e deixar um contorno para trás.
See the Pen Link Effectz – Outline on hover by Geoff Graham (@geoffgraham) on CodePen.
the Raised Text Effect
Another idea is to raise the text as if it grows out of the page on hover:
See the Pen Link Effectz – Raised text on hover by Geoff Graham (@geoffgraham) on CodePen.
o efeito Font Swapper-oo
isto é tão impraticável que me torna LOL, mas por que não:
veja o tipo de letra Da Ligação do Pen Effectz – Swap em hover por Geoff Graham (@geoffgraham) no CodePen.
o efeito “Turn it Up, Chris”
desculpa, Chris. Sabes que adoras. ❤ ️
see the pen link Effectz – turn it up, Chris! by Geoff Graham (@geoffgraham) on CodePen.o que é que consegues arranjar?