Exploración de los efectos creativos de desplazamiento de CSS para enlaces en línea

Spanish (Español) translation by Xiomara Reynoso (you can also view the original English article)

En este tutorial estamos hablando de los efectos de desplazamiento de CSS. ¡Y no cualquier efecto de desplazamiento tampoco! Vamos a crear algunas alternativas mucho más interesantes a los efectos de enlace en línea estándar que todos hemos estado usando durante años.

Demostraciones de Creative Link Hover

He creado una demostración rápida para mostrar todos estos efectos de enlace; una serie de elementos de lista ordenados con CSS Grid, y en cada uno colocaré un enlace en línea que se puede diseñar. ¡Echa un vistazo a cada uno, siéntete libre de bifurcar la demostración y ve qué puedes hacer con ellos!

Please accept marketing cookies to load this content.

Efectos de desplazamiento de vínculo en línea CSS

¡Echa un vistazo al video o sigue leyendo para obtener más explicaciones!

Estilos globales

Para todas estas demostraciones, primero establecí algunos estilos y variables globales para los elementos a:

/* Variables */
:root {
  --link-1: #D65472;
  --link-2: #37C5F0;
  --link-3: gold;
  --text: #18272F;
  --counter: #30B67D;
}

/* Reset */
a {
	text-decoration: none;
	color: var(--text);
	font-weight: 700;
	vertical-align: top;
}

He agregado una identificación a cada enlace para poder dirigirme a todos ellos fácilmente.

Efecto de desplazamiento 1: Sombra de cuadro de fondo

Este efecto deslizará una sombra de cuadro de fondo a través del enlace en línea, cambiando el color del texto del enlace a medida que lo hace.

Comenzamos agregando un poco de relleno alrededor del enlace, luego para evitar que ese relleno altera el flujo del texto, agregamos un margen negativo del mismo valor.
En lugar de usar la propiedad de background usamos box-shadow porque podemos hacer la transición.

#style-1 {
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  box-shadow: inset 0 0 0 0 var(--link-1);
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  color: var(--link-1);
}
#style-1:hover {
  color: white;
  box-shadow: inset 100px 0 0 0 var(--link-1);
}

Efecto de desplazamiento 2: Subrayado animado

Nuestro segundo efecto añade un subrayado, pero lo anima desde la mitad del texto hacia afuera para un dinamismo extra.

Lo primero que hay que hacer es darle al ancla una posición: relativa; porque usaremos pseudo elementos que queremos posicionar en él.
Usamos el pseudo elemento ::antes que colocamos arriba: 100%; para que se coloque a lo largo de la parte inferior del enlace.
Utilizamos transform: scaleX(); y la transición para animar el pseudo elemento.
También hacemos la transición del color del enlace, para que coincida con la animación de subrayado.

#style-2 {
  position: relative;
  transition: color 0.3s ease-in-out;
}
#style-2::before {
  content: "";
  position: absolute;
  top: 100%;
  width: 100%;
  height: 3px;
  background-color: var(--link-1);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#style-2:hover {
  color: var(--link-1);
}
#style-2:hover::before {
  transform: scaleX(1);
}

Efecto de desplazamiento 3: Pasar subrayado

Cuando pases el cursor sobre este enlace, verás el subrayado animado desde la izquierda y luego desaparecerá a la derecha.

Comenzamos de nuevo con la posición: relativa; en el elemento padre porque trabajaremos con un pseudo elemento.
Diseñamos el ::before con algunas reglas básicas, incluyendo un border-radius: 4px; solo para darle un aspecto un poco más suave.
Usaremos la misma idea de transformación de transición que la demostración anterior (transform: scaleX(0);) pero cambiaremos los orígenes de la transformación.
Así que comenzamos por establecer el transform-origin: right; en el elemento ::before.
Luego, en el :hover usamos transform-origin: left;.

#style-3 {
  position: relative;
}
#style-3::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: var(--text);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#style-3:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

Efecto de desplazamiento 4: Reemplazar texto

Este efecto de desplazamiento es el más complejo y el primero por el que cambiaremos el marcado. Reemplazaremos el texto del enlace con lo que almacenemos en un data-attribute en el enlace.

Comienza con la habitual posición: relativo; estilo en el padre.
Define estilos básicos para los pseudo elementos ::before y ::after.
Nuestro elemento ::before será el subrayado.
El elemento ::after mantendrá el texto que establecimos en el atributo data-replace="" (que coincidirá con el texto del enlace). Configuramos esto con contenido: attr(data-replace);.
Empujamos el elemento ::after a la derecha usando transform: translate3d(); (para aprovechar la aceleración de hardware).
También necesitamos hacerlo invisible, lo que hacemos con un desbordamiento: oculto; en combinación con la pantalla: bloque en línea; en el padre.
En :hover movemos el elemento ::after de nuevo a su posición.
Ajustamos el enlace de texto en un <span> elemento, que luego hacemos la transición fuera del enlace como el elemento ::after transiciones, y viceversa.

#style-4 {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
#style-4::before, #style-4::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
}
#style-4::before {
  background-color: var(--link-1);
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#style-4:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
#style-4::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  color: var(--link-1);
}
#style-4:hover::after {
  transform: translate3d(0, 0, 0);
}
#style-4 span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#style-4:hover span {
  transform: translate3d(-200%, 0, 0);
}

Efecto de desplazamiento 5: Varias propiedades

Hagamos las cosas un poco más simples de nuevo. En este ejemplo se utiliza un puñado de propiedades diferentes para dar un efecto de fondo de desplazamiento creciente.

Comienza con los estilos de configuración habituales que necesitamos para manipular pseudo elementos.
Establecer un índice z: -1; para enviar el bloque detrás del texto del enlace.
Desplaza el elemento ::before al desplazarse utilizando un margen negativo y expresando el ancho como calc(100% + 10px);

#style-5 {
  position: relative;
  font-weight: bold;
}
#style-5::before {
  content: "";
  background-color: var(--link-3);
  position: absolute;
  left: 0.5rem;
  bottom: 5px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
#style-5:hover::before {
  left: -5px;
  bottom: 0;
  height: 100%;
  width: calc(100% + 10px);
}

Efecto de desplazamiento 6: Degradado multilínea

Los efectos hasta ahora funcionan bien cuando los enlaces en línea se encuentran en una línea, pero ¿qué pasa si el enlace se extiende a través de varias líneas? Hagamos una obra de teatro con un efecto que funcione en ese escenario.

Usa un enlace largo para ver mejor el efecto de este.
Aplicamos un degradado de fondo para el borde inferior.
Se ve así: imagen de fondo: gradiente lineal (blanco 50%, var(--link-2) 50%); y nos da un fondo que es mitad blanco, mitad azul para empezar.
Luego usamos un tamaño de fondo: automático 175%; para escalar el gradiente de fondo 175% verticalmente. Esto amplía efectivamente todo el fondo, que está alineado con el borde superior, recortando gran parte del azul en el proceso. De esta manera creamos nuestro subrayado.
Al pasar el cursor, colocamos el fondo de modo que se alinee con la parte inferior del enlace.

#style-6 {
  background-image: linear-gradient(white 50%, var(--link-2) 50%);
  background-size: auto 175%;
  transition: background 0.3s ease-in-out;
}
#style-6:hover {
  background-position-y: 100%;
}

Conclusión

Nada mejor que un buen tutorial práctico ¿eh? Espero que hayas disfrutado creando estos efectos de enlace y desarrollando tus habilidades a medida que progresabas a través de ellos. No olvides que puedes ver el video en la parte superior de la página para obtener una explicación más visual de estos efectos flotantes. ¡Gracias por ver/leer!