Un diseñador con el que trabajo estaba presentando composiciones en una reunión reciente del equipo. Había hecho un trabajo maravilloso al reconstruir el concepto de un sistema de diseño, desde los componentes hasta los patrones y todo lo demás que haría feliz a cualquier desarrollador de aplicaciones para el usuario.
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.
Enlace predeterminado (arriba) y efecto de desplazamiento (abajo)
¡Eh! No solo no había visto eso antes, la idea nunca se me había pasado por la cabeza. Resulta que hay muchas instancias de esto en sitios en vivo, uno de ellos es The Outline. Esa fue la implementación que inspiró el diseño.
Genial, pensé. 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. Nuevamente, de The Outline:
Captura de pantalla del artículo de The Outline (fuente)
¡Guau! 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 la compatibilidad con varios navegadores.
Entonces, ¿cómo lo hizo The Outline? Resulta que es SVG. Podemos hacer un camino ondulado y animarlo con bastante facilidad:
Vea Pen Squiggle de Geoff Graham (@geoffgraham) en CodePen.
Pero, ¿cómo funciona eso con un enlace? Bueno, podemos usar SVG en el background-image propiedad:
Vea Pen Squiggle de Geoff Graham (@geoffgraham) en CodePen.
Pero eso es un poco malo porque realmente no podemos animar eso. Necesitamos mejores valores para eso. Sin embargo, podemos insertar CSS directamente en el SVG en el background-image propiedad. No podemos simplemente copiar y pegar el código SVG en la propiedad, pero podemos hacerlo con una codificación adecuada:
Vea Pen Squiggle 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 el background-image propiedad, de la misma manera que lo haríamos con CSS en un encabezado de documento HTML o CSS en línea en HTML.
Vea Pen Squiggle de Geoff Graham (@geoffgraham) en CodePen.
Podemos diseñarlo de manera un poco diferente, si queremos:
Vea el Pen Link Effectz – Squiggle de Geoff Graham (@geoffgraham) en CodePen.
¡Esto es inspirador!
No tengo idea de si un garabato animado ofrece una buena experiencia de usuario y, francamente, ese no es el objetivo de esta publicación. El caso es que The Outline tuvo una idea divertida con una elegante implementación de CSS.
Eso me hizo pensar en otros estilos de desplazamiento no estándar (quizás incluso no convencionales) que podemos hacer con enlaces. Nuevamente, deje de lado la usabilidad y diviértase con CSS …
El efecto de borde a fondo
Tal vez ese mismo borde inferior en el enlace predeterminado pueda crecer y convertirse en el fondo completo del enlace al pasar el mouse:
Vea Pen Link Effectz – Background on hover por Geoff Graham (@geoffgraham) en CodePen.
Diablos, incluso podemos hacer algo similar horizontalmente:
Vea Pen Link Effectz – Fondo horizontal de Geoff Graham (@geoffgraham) en CodePen.
El efecto de texto delineado
Eliminemos el color de la fuente y dejemos un contorno.
Vea Pen Link Effectz – Esquema al pasar el mouse por Geoff Graham (@geoffgraham) en CodePen.
El efecto de texto en relieve
Otra idea es elevar el texto como si creciera fuera de la página al pasar el mouse:
Vea Pen Link Effectz: texto elevado al pasar el mouse por Geoff Graham (@geoffgraham) en CodePen.
El efecto Font Swapper-oo
Esto es tan poco práctico que me hace LOL, pero por qué no:
Vea Pen Link Effectz – Swap font on hover por Geoff Graham (@geoffgraham) en CodePen.
El efecto “Turn it Up, Chris”
Lo siento, Chris. Sabes que te encanta. ❤️
Vea el Pen Link Effectz – ¡Súbelo, Chris! por Geoff Graham (@geoffgraham) en CodePen.
¿Qué se te ocurre?
¿Tienes ideas? Házmelo saber en los comentarios y los arrojaré a la colección de CodePen que comencé.