El autor del artículo, cuya traducción publicamos hoy, propone, utilizando CSS puro, crear un mecanismo para cambiar el color del texto del enlace cuando pasa el cursor sobre él. Pero esto no debería ser un cambio de color ordinario. El nuevo color debe llenar el enlace de izquierda a derecha, reemplazando el anterior.Para hacer esto, puede recurrir a uno de los cuatro métodos descritos en este material. Considere estos métodos, prestando especial atención a varias cosas importantes como la accesibilidad al contenido, el rendimiento de la solución y el soporte del navegador.Método # 1: usando background-clip: text
Al momento de escribir esto, la propiedad background-clip: text es experimental. No es compatible con Internet Explorer 11 y versiones posteriores. Este método implica crear el llamado " texto extraído " (texto que parece recortado en una superficie determinada y que el fondo es translúcido) con un gradiente agudo . El marcado HTML consta de un único elemento <a>que describe un hipervínculo.<a href="#">Link Hover</a>
Comencemos creando estilos para el enlace. El uso overflow: hiddenconducirá al hecho de que cuando cambia la apariencia del enlace, todo lo que está más allá del alcance de este elemento se corta.a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
}
Tendremos que usar un gradiente lineal nítido con un valor del 50% para los colores de inicio y finalización del enlace.a {
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
Use la propiedad background-clippara recortar el degradado. Vamos a darle un valor textpara mostrar texto. Utilizaremos las propiedades de background-sizey background-position. Esto se hace para mostrar el color inicial.a {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
}
Y finalmente, agregue una propiedad CSS al estilo y diseñe la transitionpseudoclase de hipervínculo :hover. Para que el nuevo color para llenar el enlace de izquierda a derecha cuando se pasa sobre el enlace, utiliza la propiedad background-position.a {
transition: background-position 275ms ease;
}
a:hover {
background-position: 0 100%;
}
Aquí hay un ejemplo en CodePen. Aunque esta técnica le permite lograr el efecto deseado, Safari y Chrome recortaron texto y elementos de sombra. Esto significa que no se mostrarán. Aplicar estilos de texto, como subrayar texto usando la propiedad CSS text-decoration, no funcionará. Por lo tanto, si desea que los enlaces estén subrayados, debe considerar otras formas de personalizar el subrayado .Método # 2: aplicando ancho / alto
Este método se basa en el uso del atributo data- * que contiene el mismo texto que la etiqueta <a>. Aquí usa la administración de propiedades width(para llenar el enlace con color de izquierda a derecha o de derecha a izquierda) o propiedad height(para aplicar el efecto de arriba a abajo o de abajo a arriba). Por ejemplo, en nuestro caso, se aplica un efecto a una propiedad widthque, cuando pasa el mouse sobre un enlace, cambia de 0 a 100%. Aquí está el marcado:<a href="#" data-content="Link Hover">Link Hover</a>
El CSS es similar al utilizado en el ejemplo anterior, excepto por la configuración de las propiedades de fondo. Aquí, además, la propiedad funcionará bien text-decoration:a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
overflow: hidden;
}
Aquí es donde necesitamos usar el texto del atributo data-content. Este texto se colocará encima del contenido de la etiqueta <a>. Podemos usar un pequeño truco interesante aquí, que consiste en copiar texto de un atributo y derivarlo usando una función attr()en la propiedad de un contentpseudo-elemento de un enlace ::before.a::before {
position: absolute;
content: attr(data-content);
top: 0;
left: 0;
color: midnightblue;
text-decoration: underline;
overflow: hidden;
transition: width 275ms ease;
}
Para que el texto no salte a una nueva línea, se aplicará un estilo al pseudo-elemento white-space: nowrap. Para cambiar el color del enlace, establezca el valor de la propiedad CSS del colorpseudo - elemento ::beforey haga que al principio el valor de la propiedad sea width0:a::before {
width: 0;
white-space: nowrap;
}
Aumente el valor del widthpseudo-elemento ::beforeal 100% para aplicar el efecto cuando pase el mouse sobre el enlace del mouse:a:hover::before {
width: 100%;
}
Aquí hay un ejemplo de la aplicación de este método: aunque nosotros, actuando sobre las propiedades del elemento widthy heightlogramos lo que necesitamos, este método es notable por su baja productividad . Para obtener un cambio de color suave a 60 cuadros por segundo, es mejor usar las propiedades transformo. El opacityuso de la propiedad le text-decorationpermite usar varios estilos de enfatizar texto en enlaces animados. Aquí hay un ejemplo que demuestra esto, creado usando la tercera técnica, que ahora consideraremos. Se basa en el uso de la propiedad CSS de clip-path .Método 3: usar clip-path
Aquí usaremos la propiedad CSS clip-pathy el polígono, en este caso, el rectángulo. El rectángulo tiene cuatro esquinas, la longitud de dos de sus lados aumenta cuando pasa el cursor sobre el enlace. La figura se expande, uno de sus lados se mueve de izquierda a derecha.Utiliza el mismo marcado que en el ejemplo anterior:<a href="#" data-content="Link Hover">Link Hover</a>
Nosotros, nuevamente, usaremos el pseudo-elemento ::before. Pero el CSS es diferente aquí: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 del método anterior, aquí la propiedad text-decoration: underlinedebe establecerse para el pseudo-elemento ::before. Esto es necesario para que el cambio de color afecte no solo el texto del enlace, sino también la línea que subraya el enlace. Ahora veamos el código CSS de la propiedad clip-path:clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
Las posiciones de los vértices del polígono en la propiedad se clip-pathespecifican como un porcentaje, determinan las coordenadas en el orden correspondiente a su colocación en el polígono:0 0 = esquina superior izquierda0 0 = esquina superior derecha0 100% = esquina inferior derecha0 100% = esquina inferior izquierda
La dirección de aplicación del efecto de relleno se puede modificar modificando las coordenadas. Ahora que conocemos las coordenadas, podemos hacer que la figura crezca moviéndose de izquierda a derecha cuando pasa el mouse sobre el enlace del mouse:a:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
Aquí hay una versión funcional de este ejemplo: esta técnica de animación de colores de enlaces funciona muy bien, pero antes de usarla, considere el soporte de la propiedad en clip-pathdiferentes navegadores. Crear transiciones CSS usando clip-pathes mejor que usar la técnica de alto / ancho. Sin embargo, su uso lleva al hecho de que el navegador realiza operaciones de Paint (dibujo) que requieren muchos recursos .Método # 4: usando transform
El marcado que se usa aquí usa la técnica de enmascaramiento de elementos <span>. Como utilizaremos <span>contenido que duplica el contenido del enlace en el elemento , utilizaremos el atributo para mejorar la disponibilidad del contenido aria-hidden="true". Esto ocultará el texto repetido de los lectores de pantalla.Dicho texto no se expresará dos veces:<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>
El CSS para el elemento <span>contiene una descripción de la transición, que comienza a la izquierda:span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: translateX(-100%);
transition: transform 275ms ease;
}
Ahora necesita organizar el movimiento del elemento <span>hacia la derecha, como se muestra a continuación.Para hacer esto, use el ::beforeelemento pseudoelemento <span>. Y, como antes, recurriremos al uso del atributo data-content. Cambiemos la posición del elemento, aplicando una transformación transform: translateX(100%), moviéndola 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 con el elemento <span>, la posición del pseudo-elemento ::beforese establecerá utilizando la construcción transform: translateX(0):a:hover span::before {
transform: translateX(0);
}
Aquí hay un ejemplo en CodePen. Aunque este método tiene la mejor compatibilidad entre navegadores de lo anterior, necesita más HTML y CSS para implementarlo. Sin embargo, el uso de las propiedades CSS transform no daña el rendimiento , su uso no causa el rediseño de los elementos y, como resultado, conduce a la formación de transiciones CSS suaves a 60 cuadros por segundo.Resumen
Acabamos de ver cuatro métodos diferentes para lograr el mismo efecto usando CSS. Aunque cada uno de ellos tiene sus pros y sus contras, puedes ver que no hay nada imposible en organizar la animación del color del texto de los enlaces cuando pasas el cursor sobre ellos. Este es un pequeño efecto agradable, cuyo uso lleva al hecho de que los enlaces se perciben como más interactivos.¡Queridos lectores! ¿Anima enlaces en sus proyectos?