Creemos un efecto CSS puro que cambia el color de un enlace de texto al pasar el mouse … pero deslice ese nuevo color en lugar de simplemente intercambiar colores.
Hay cuatro técnicas diferentes que podemos utilizar para hacer esto. Veámoslos teniendo en cuenta las cosas importantes, como la accesibilidad, el rendimiento y la compatibilidad con el navegador.
¡Empecemos!
Técnica 1: Uso de clip de fondo: texto
En el momento de escribir este artículo, el background-clip: text La propiedad es una función experimental y no es compatible con Internet Explorer 11 y versiones anteriores.
Esta técnica implica la creación de texto noqueado con un degradado de parada rígida. El marcado consta de un único enlace HTML (<a>) elemento para crear un hipervínculo:
<a href="https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/#">Link Hover</a>Podemos comenzar a agregar estilos al hipervínculo. Utilizando overflow: hidden recortará cualquier contenido fuera del hipervínculo durante la transición de desplazamiento:
a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
}Necesitaremos usar un degradado lineal con una parada dura al 50% del color inicial que queremos que tenga el enlace, así como el color al que cambiará:
a {
/* Same as before */
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}Usemos background-clip para recortar el degradado y el text valor para mostrar el texto. También usaremos el background-size y background-position propiedades para que aparezca el color inicial:
a {
/* Same as before */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
}Finalmente, agreguemos el transition Propiedad CSS y :hover Pseudoclase CSS al hipervínculo. Para que el enlace se llene de izquierda a derecha al pasar el mouse, use el background-position propiedad:
a {
/* Same as before */
transition: background-position 275ms ease;
}
a:hover {
background-position: 0 100%;
}Si bien esta técnica logra el efecto de desplazamiento, Safari y Chrome recortarán las decoraciones de texto y las sombras, lo que significa que no se mostrarán. La aplicación de estilos de texto, como un subrayado, con la propiedad CSS de decoración de texto no funcionará. Quizás considere usar otros enfoques al crear subrayados.
Técnica 2: Uso de ancho / alto
Esto funciona mediante el uso de un atributo de datos que contiene el mismo texto que el de la <a> etiqueta y configurando el width (llenando el texto de izquierda a derecha o de derecha a izquierda) o height (llenando el texto de arriba hacia abajo o de abajo hacia arriba), de 0% a 100% al pasar el mouse.
Aquí está el marcado:
<a href="https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/#" data-content="Link Hover">Link Hover</a>El CSS es similar a la técnica anterior menos las propiedades del CSS de fondo. El text-decoration la propiedad funcionará aquí:
a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
overflow: hidden;
}Aquí es cuando necesitamos usar el contenido de la data-content atributo. Se colocará sobre el contenido en el <a> etiqueta. Podemos usar el pequeño truco de copiar el texto en el atributo de datos y mostrarlo a través del attr() función en la propiedad de contenido del elemento ::before pseudo-elemento.
a::before {
position: absolute;
content: attr(data-content); /* Prints the value of the attribute */
top: 0;
left: 0;
color: midnightblue;
text-decoration: underline;
overflow: hidden;
transition: width 275ms ease;
}Para evitar que el texto pase a la siguiente línea, white-space: nowrap sera aplicado. Para cambiar el color de relleno del enlace, establezca el valor de la propiedad CSS de color usando el ::before pseudo-elemento y tener el width empezar en 0:
a::before {
/* Same as before */
width: 0;
white-space: nowrap;
}Aumente el ancho al 100% para ::before pseudo elemento para completar el efecto de texto al pasar el mouse:
a:hover::before {
width: 100%;
}Si bien esta técnica hace el truco, el uso de la width o height las propiedades no producirán una transición CSS eficaz. Es mejor utilizar el transform o opacity propiedades para lograr una transición suave a 60 fps.
Utilizando el text-decoration La propiedad CSS puede permitir que aparezcan diferentes estilos de subrayado en la transición CSS. Creé una demostración mostrando esto usando la siguiente técnica: el clip-path Propiedad CSS.
Técnica 3: uso de la ruta del clip
Para esta técnica, usaremos el clip-path Propiedad CSS con forma de polígono. El polígono tendrá cuatro vértices, y dos de ellos se expandirán hacia la derecha al pasar el mouse:
El marcado es el mismo que en la técnica anterior. Usaremos un ::before pseudo-elemento de nuevo, pero el CSS es diferente:
a::before {
position: absolute;
content: attr(data-content);
color: midnightblue;
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}A diferencia de las técnicas anteriores, text-decoration: underline debe ser declarado al ::before pseudo-element para que el color llene el subrayado al pasar el mouse.
Ahora echemos un vistazo al CSS para clip-path técnica:
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);Los vértices del polígono del clip-path La propiedad se establece en porcentajes para definir las coordenadas por el orden escrito:
0 0= arriba a la izquierda0 0= arriba a la derecha100% 0= abajo a la derecha0 100%= abajo a la izquierda
La dirección del efecto de relleno se puede cambiar modificando las coordenadas. Ahora que tenemos una idea de las coordenadas, podemos hacer que el polígono se expanda hacia la derecha al pasar el mouse:
a:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}Esta técnica funciona bastante bien, pero tenga en cuenta que el soporte para el clip-path La propiedad varía entre los navegadores. Creando una transición CSS con clip-path es una mejor alternativa que usar el width/height técnica; sin embargo, afecta la pintura del navegador.
Técnica 4: Usando transformar
El marcado de esta técnica utiliza un método de enmascaramiento con un <span> elemento. Dado que usaremos contenido duplicado en un elemento separado, usaremos aria-hidden="true" para mejorar la accesibilidad, que lo ocultará de los lectores de pantalla para que el contenido no se lea dos veces:
<a href="https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>El CSS para el <span> El elemento contiene una transición que comenzará desde la izquierda:
span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: translateX(-100%);
transition: transform 275ms ease;
}A continuación, necesitamos obtener el <span> para deslizar a la derecha así:
Para hacer esto, usaremos el translateX() Función CSS y configúrelo en 0:
a:hover span {
transform: translateX(0);
}Entonces, usaremos el ::before pseudo-elemento para el <span>, nuevamente usando el data-content atributo que hicimos antes. Estableceremos la posición traduciéndola al 100% a lo largo del eje x.
span::before {
display: inline-block;
content: attr(data-content);
color: midnightblue;
transform: translateX(100%);
transition: transform 275ms ease;
text-decoration: underline;
}Al igual que el <span> elemento, la posición del ::before pseudo-elemento también se establecerá en translateX(0):
a:hover span::before {
transform: translateX(0);
}Si bien esta técnica es la más compatible con todos los navegadores del grupo, requiere más marcado y CSS para llegar allí. Dicho esto, el uso de la propiedad transform CSS es excelente para el rendimiento, ya que no activa los repintados y, por lo tanto, produce transiciones CSS suaves a 60 fps.
¡Ahí lo tenemos!
Solo analizamos cuatro técnicas diferentes para lograr el mismo efecto. Aunque cada uno tiene sus pros y sus contras, puede ver que es totalmente posible deslizar un cambio de color en el texto. Es un efecto pequeño y elegante que hace que los enlaces se sientan un poco más interactivos.