Divirtiéndome con los efectos de enlace flotante
Un diseñador con el que trabajo presentó composiciones en una reunión reciente del equipo. Ella había hecho un trabajo maravilloso juntando el concepto para un sistema de diseño, desde componentes hasta patrones y todo lo demás que haría feliz a cualquier desarrollador de front-end.
Pero había un pequeño detalle en su trabajo que me llamó la atención: el estado flotante de los enlaces era un garabato.
Huh! No solo no lo había visto antes, la idea nunca se me había pasado por la cabeza. Resulta que hay muchos ejemplos de esto en sitios en vivo, uno de ellos es El Esquema. Esa fue la implementación que inspiró el diseño.
Genial, me imaginé. Podemos hacer algo como un degradado de fondo lineal o incluso una imagen de fondo. Pero! Ese no fue el final del diseño. Resulta que también está animado. De nuevo, desde El Esquema:
Whoa! Eso es bastante salvaje. No estaba seguro de cómo abordar eso, honestamente, porque animar cualquiera de mis ideas iniciales sería difícil, especialmente para el soporte entre navegadores.
Entonces, ¿cómo lo hizo el Esquema? Resulta que es SVG. Podemos hacer un trazado ondulado y animarlo con bastante facilidad:
Ver el Garabato de pluma de Geoff Graham (@geoffgraham) en CodePen.
Pero, ¿cómo funciona eso con un enlace? Bueno, podemos usar SVG en la propiedad background-image:
Ver el Garabato de pluma de Geoff Graham (@geoffgraham) en CodePen.
Pero eso es un poco malo porque realmente no podemos animarlo. Necesitamos mejores valores para eso. Sin embargo, podemos insertar CSS directamente en el SVG en la propiedad background-image. No podemos simplemente copiar y pegar el código SVG en la propiedad, pero podemos con alguna codificación adecuada:
Ver el Garabato de pluma de Geoff Graham (@geoffgraham) en CodePen.
Y, dado que SVG puede contener sus propios estilos dentro del marcado, la animación se puede lanzar allí mismo en la propiedad background-image, de la misma manera que lo haríamos con CSS en un encabezado de documento HTML o CSS en línea en HTML.
Ver el Garabato de pluma de Geoff Graham (@geoffgraham) en CodePen.
Podemos darle un estilo un poco diferente, si queremos:
Vea el Enlace de lápiz Effectz – Garabato de Geoff Graham (@geoffgraham) en CodePen.
¡Esto es inspirador!
No tengo ni idea de si un garabato animado proporciona una buena experiencia de usuario y, francamente, ese no es el objetivo de este post. El punto es que El Esquema tuvo una idea divertida con una implementación CSS ingeniosa.
Eso me hizo pensar en otros estilos de hover no estándar (quizás incluso no convencionales) que podemos hacer con enlaces. De nuevo, dejando a un lado la usabilidad y diviértase con CSS
El efecto de Borde a fondo
Tal vez el mismo borde inferior en el enlace predeterminado pueda crecer y convertirse en el fondo completo del enlace al pasar el cursor:
Vea el enlace de lápiz Effectz-Background en hover de Geoff Graham (@geoffgraham) en CodePen.
Diablos, incluso podemos hacer algo similar horizontalmente:
Ver el Fondo de enlace de lápiz Effectz – Horizotonal de Geoff Graham (@geoffgraham) en CodePen.
El Efecto de Texto Delineado
Eliminemos el color de la fuente y dejemos un contorno atrás.
Vea el enlace de lápiz Effectz – Outline en hover de Geoff Graham (@geoffgraham) en CodePen.
El Elevado Efecto de Texto
Otra idea es elevar el texto como si crece fuera de la página en hover:
Ver la Pluma Enlace Effectz – Levantado de texto en hover por Geoff Graham (@geoffgraham) en CodePen.
El efecto Swapper-oo de fuentes
Esto es tan poco práctico que me hace LOL, pero por qué no:
Vea la fuente Effectz – Swap de enlace de lápiz en hover de Geoff Graham (@geoffgraham) en CodePen.
El Efecto «Sube el volumen, Chris»
Lo siento, Chris. Sabes que te encanta. ❤️
Ver el efecto de enlace de lápiz Z – ¡Súbelo, Chris! por Geoff Graham (@geoffgraham) en CodePen.