10 fragmentos de CSS para crear impresionantes efectos de texto subrayado animado

El subrayado CSS predeterminado funciona muy bien. ¿Quién podría odiarlo?

Pero siempre hay espacio para mejorar las cosas. Puede que no creas que puedes hacer mucho con los subrayados, pero si profundizas en la animación CSS, ¡te darás cuenta de todo lo que realmente puedes hacer!

Revisé innumerables estilos de subrayado CSS y elegí mis mejores opciones para los mejores subrayados personalizados en la web. Si alguno de estos te llama la atención, siéntete libre de saltar e intentar jugar con el código fuente.

1. Subrayado alterno

Si mueve el cursor entre estos enlaces, notará algo un poco divertido. El efecto de subrayado en el menú de navegación en realidad cambia los estilos entre los enlaces.

No solo eso, sino que se mueve a través de la navegación dinámicamente para dar la ilusión de que es un bloque singular. Bastante genial, ¿verdad?

Puede hacer todo esto usted mismo con un poco de CSS agregando el bloque subrayado en un elemento HTML. Sorprendentemente simple teniendo en cuenta el poco código que necesita (alrededor de 60 líneas de CSS).

2. Abarcando múltiples líneas

Los estilos de salto de línea CSS son complicados y no fáciles de solucionar. Pero con un poco de ingenio, el desarrollador Will King construyó este bolígrafo creando un efecto de subrayado dinámico que puede abarcar varias líneas sin errores.

Tenga en cuenta que esto depende de un poco de JavaScript para mantener la línea intacta. Pero también es lo suficientemente dinámico para trabajar con cualquier enlace en la página, por lo que no importa cómo formatee el texto.

Además, todo esto utiliza un degradado CSS3 personalizado para el fondo, que es bastante genial.

3. Subrayado deslizante

El desarrollador Ryan Morse creó este efecto de subrayado deslizante muy simple que depende únicamente de CSS. Es una solución bastante elegante teniendo en cuenta que ni siquiera requiere un elemento HTML adicional.

Puede diseñar sus menús de navegación como cualquier otro sitio y usar este efecto CSS para crear animaciones deslizantes dinámicas. Además, todos los resultados se pueden modificar en el código CSS, que incluye las aceleraciones y la duración total.

4. Mejor subrayado de texto

A primera vista, es posible que no note nada diferente con este subrayado. Pero si lo compara con la demostración "predeterminada" más abajo en la página, verá que realmente se ve mucho mejor.

En el mejor texto subrayado de Lukas Horak, notará que la barra debajo del texto se ajusta mejor a los elementos descendentes. Esto considera formas de letras como 'g' y 'p' donde las líneas caen por debajo de la altura de línea habitual.

Además, el subrayado en sí mismo se empuja ligeramente hacia abajo debajo del texto para que adquiera una nueva apariencia en comparación con el navegador predeterminado.

5. Estilos de animación

Este bolígrafo único tiene algunos efectos de subrayado personalizados creados con CSS puro por el desarrollador Matthew Scott.

Cuenta con cuatro estilos de subrayado muy específicos basados ​​en algunas transiciones CSS comunes:

• De derecha a izquierda
• De izquierda a derecha
• Animando hacia afuera
• Animando hacia adentro

Notará que esto funciona en las transiciones comunes de CSS3 que funcionan tanto al pasar el mouse por encima del enlace como al mover el cursor fuera del enlace.

Definitivamente algunos efectos geniales y todos son bastante fáciles de trasladar a sus propios proyectos.

6. Más estilos de animación

Aquí hay otro paquete de animaciones de subrayado personalizadas, estas creadas por dev Kseso.

Estos van un poco más extremos con los estilos de subrayado que empujan las sombras de CSS3 para obtener efectos brillantes. Probablemente puedas usar esto como una plantilla para hacer un diseño de sable de luz de Star Wars radical si tienes tiempo (o simplemente te encanta Star Wars).

7. Solo apareciendo

He visto este efecto en algunos sitios web y probablemente sea uno de mis favoritos. El subrayado desplegable utiliza CSS puro y anima la línea a la vista con un efecto de transición.

Con esta animación todavía tienes la sensación de que cada "borde" subrayado se conecta a cada enlace. Me gusta más que las líneas que se deslizan entre los enlaces porque este efecto se siente más ágil y directo.

Si desea un enfoque realmente minimalista para subrayar los efectos, definitivamente debería intentar trabajar con este código.

8. Animación en expansión

El estilo de subrayado expandido se puede encontrar en el paquete de subrayado que mencioné anteriormente. Pero este subrayado específico es un poco diferente porque utiliza tiempos de animación personalizados.

Tenga en cuenta que está usando la función cubic-bezier() para crear una animación única al pasar el mouse.

Esto se ejecuta un poco más rápido que la transición "lineal" predeterminada, por lo que produce un efecto bastante diferente. E incluso puede intentar personalizar la animación de bezier usted mismo para crear un estilo de subrayado único propio.

9. Subrayados CSS personalizados

Aquí hay otro estilo que realmente puede funcionar en cualquier sitio web. El desarrollador Tristan Wilson creó estos subrayados simples que bordean la línea unos pocos píxeles por debajo del texto.

Es lo suficientemente sutil como para notarlo, pero ciertamente no hará una gran diferencia en la usabilidad. Este efecto tiene que ver más con la estética que con la facilidad de uso adicional.

Si desea que sus subrayados realmente se destaquen de toda la manada, este conjunto es un excelente lugar para comenzar.

10. Ajuste entre descensores

Anteriormente mencioné la personalización de los estilos de subrayado para que encajen con los descendientes en el tipo. Bueno, este bolígrafo de Jonathan Neal hace exactamente eso y no usa nada más que HTML5 y CSS3.

Todo el efecto depende de un par de propiedades CSS3: box-shadow y text-shadow para ser precisos.

Esto crea la ilusión de que hay espacio al costado de los elementos descendentes y le da al subrayado una sensación más elegante.

Definitivamente una opción limpia para cualquier sitio web y también es una buena manera de alternar el color de subrayado.

11. Gradientes personalizados

Si realmente está tratando de superar los límites, intente volver a trabajar este lápiz con su estilo degradado de subrayado personalizado.

El degradado se ejecuta a través de CSS3 para que pueda cambiar los colores a cualquier cosa que desee. Y si puedes creerlo, esta cosa no requiere HTML adicional para funcionar. Simplemente apunte a los enlaces de anclaje que desee y copie / pegue los códigos CSS para obtener sus propios subrayados degradados.

De todos estos diseños, ciertamente espero que haya un buen efecto que puedas llevarte de esta colección.

Los diseñadores no siempre piensan en los efectos de subrayado, pero hay muchas cosas que puedes hacer con la tipografía y si conoces CSS, entonces realmente, el cielo es el límite.