Tutorial: Rellenar fondo de texto de forma infinita con CSS

Crear efectos con lenguaje web es muy divertido y además, permite dar un toque diferente y creativo a nuestros diseños web. A mí es una práctica que me gusta utilizar de vez en cuando en mis diseños, especialmente si queremos llamar la atención en una CTA. Confieso que un color llamativo y una tipografía bonita, son la clave para que el resultado quede espectacular.

Ahora, vamos a crear dicho efecto de fondo infinito, de forma practica y dinámica. Voy a detallar cada apartado utilizado y finalmente veremos el resultado final. ¿Me acompañas en este tutorial?

Aquí creamos la class palabraefecto que es la clase a la que daremos forma en el CSS. He utilizado un span al que he añadido dicha clase. Para hacerlo más visual os pongo el contenido más la clase, que es lo que veremos al finalizar el turorial.

El CSS es la clave para añadir color, el fondo, el relleno y por supuesto la animación que vamos a darle, en ese caso una animación de relleno que incluye el término «infinite» para hacerla infinita. Para jugar con cada apartado, es imprescindible tener un mínimo de conocimiento de lenguaje web ya que sino os resultará complicado entender donde se modifica el fondo, el tipo de letra, el tamaño de la letra,…

El resultado es muy llamativo, de ahí su versatilidad para utilizarlo en una CTA, como título de una sección que queremos destacar,… Es importante dominar el uso de HTML + CSS para conseguir resultados increíbles y poder personalizar al máximo una página web o tienda online.