Crea Textos de Colores Animados con CSS

Los textos son una de las partes más importantes a la hora de afrontar un diseño web. Por un lado, tener textos que sean legibles hace que pueda llegar mejor nuestro mensaje. Y por otro, los titulares y encabezados llamativos hacen que podamos captar mejor la atención de nuestros visitantes. Sobre estos últimos nos queremos centrar hoy, ya que mediante CSS, podemos hacer que el típico color plano de relleno de las letras den un paso más, y se conviertan en un relleno de color animado.

En este artículo nos centraremos en dos pequeños ejemplos con los que tener una base, y a partir de ahí empezar a construir casi cualquier cosa que se nos ocurra. En el primero veremos como aplicar un degradado de color al texto, y que este se mueva en un loop infinito. Tendremos una especie de arco iris en movimiento de fondo.En el segundo, siguiendo las mismas pautas que en el anterior, cambiaremos el degradado de color por un patrón de líneas de colores. Será algo parecido a las típicas barras en movimiento que colgaban de las fachadas de la barbería, pero en horizontal.

Como vamos a usar CSS, os recomendamos que echéis un vistazo a nuestra guía de iniciación a todos aquellos que no estéis familiarizados con este lenguaje. Aunque el código que vamos a utilizar no es muy complejo ni abundante, siempre está bien conocer los conceptos básicos de CSS para no añadirle más dificultad al proceso. En fin, no demos más vueltas y veamos como podemos añadir color y animación a nuestros textos.

Texto con gradiente de color animado

Para empezar, vamos a usar una tipografía con el suficiente cuerpo para que sea evidente tanto el color que tiene como la animación. Nos hemos decantado por Fredoka One, que tenéis disponible de forma gratuita en Google Fonts, aunque podéis utilizar la que veáis más conveniente. Antes de empezar a escribir CSS a lo loco, veamos cual será el proceso paso a paso que vamos a realizar:

• Aplicamos un color de fondo a la fuente mediante la propiedad CSS background-image.
• Crearemos una máscara de recorte entre el fondo y el texto gracias a la propiedad CSS background-clip.
• Animamos el fondo con la propiedad animation y diferentes keyframes.

Este es el plan. Solo nos queda ejecutarlo.

Degradado de fondo

Como hemos dicho antes usaremos la propiedad background-image con un linear-gradient. Sobre este degradado de color, como queremos que este animado en un loop infinito y sin cortes, necesitamos que el color de inicio del degradado y el del final sea el mismo. Así, cuando la animación llegue al final y vuelva al principio, no se apreciará ningún tipo de corte ya que es el mismo color. En esta imagen podéis ver de forma más gráfica a que nos referimos.

Este degradado de color, en CSS quedaría de esta forma:

.text-gradient {
    background-image: linear-gradient(to left, #FFD700, #7B68EE, #3498db, #2ecc71, #FFD700);      
}

Bien, primer punto conseguido, pasemos al siguiente.

Máscara entre fondo y texto

Ya tenemos nuestro degradado, pero vemos que está aplicado al fondo y no al texto. Para esto, aplicaremos la propiedad background-clip, que nos creará dicha máscara de recorte. Pero claro, por si sola no nos va a funcionar, ya que nuestro texto tiene aplicado un color por defecto que se superpone al degradado. Para quitarlo, tan sencillo como aplicarle un color transparente. Sumando todo, este sería el código a añadir:

.text-gradient {
    color: transparent;    
    background-clip: text;        
}

Animación de la imagen de fondo

Bien, ya tenemos el degradado de color aplicado en nuestro texto, pero esta todo bastante estático. Vamos a darle un poco de movimiento. Lo primero que haremos es ampliar el tamaño de nuestro fondo, ya que si estamos viendo tanto el principio como el final, no vamos a apreciar movimiento de ningún tipo. Yo le daré una ampliación del 500%, pero podéis usar un valor mayor o menor según veáis que se muestre cada color del degradado con mayor o menor anchura.

.text-gradient {    
    background-size: 500%;    
}

Lo siguiente es, con la propiedad animation, designar el nombre de nuestra animación (que usaremos después en nuestros keyframes), la velocidad de la animación (3 segundos), su timing y las iteraciones. El valor usado en el timing será linear, ya que queramos que la velocidad sea constante. Y la iteración será infinite, ya que queremos que la animación nunca se pare.

.text-gradient {    
    animation: color 3s linear infinite;       
}

Por último, los keyframes. Quizás sea la parte más complicada de entender, pero si sois asiduos a programas de edición de video, seguro que os suena. Como la animación es muy sencilla, solo es un movimiento horizontal, con dos valores será más que suficiente. Usando el nombre que designamos dentro de la propiedad animation (en mi caso, color), nuestro keyframe inicial es el lado izquierdo del fondo a mitad de altura (0% 50%). Y nuestro keyframe final es el lado derecho a mitad de altura (100% 50%). Es decir, un movimiento de izquierda a derecha.

@keyframes color {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

Resultado

Veamos junto todo el CSS que hemos escrito hasta ahora:

>.text-gradient {
    color: transparent;
    background-image: linear-gradient(to left, #FFD700, #7B68EE, #3498db, #2ecc71, #FFD700);    
    background-clip: text;
    animation: color 3s linear infinite;
    background-size: 500%;    
}

@keyframes color {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

Con esto, ya tenemos creada nuestra animación de color para el texto. A partir de aquí, podemos crear cualquier otro tipo de degradado, o aplicar una imagen como fondo. Queda todo a nuestra imaginación. También podemos variar los valores del tiempo de animación, para que sea más lenta o rápida, o el tamaño del fondo, para ajustarlo a nuestras necesidades.

Texto con patrón animado

Habiendo creado nuestro texto con degradado animado, veamos rápidamente como sería si queremos hacer otro ejemplo, solo que sea un fondo rayado de colores. La parte buena es que podemos reutilizar todo el código que hemos creado hasta ahora. Solo cambiaremos los valores del fondo. Este sería nuestro nuevo fondo con patrón rayado en CSS:

.text-pattern {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255, 255, 255, .5) 25px, rgba(255, 255, 255, .5) 50px);       
}

Y esto el código CSS total, con todo lo visto hasta ahora añadido:

.text-pattern {
    color: transparent;
    background-color: #DC143C;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255, 255, 255, .5) 25px, rgba(255, 255, 255, .5) 50px);    
    background-clip: text;
    animation: color 50s linear infinite;
    background-size: 200%;    
}

@keyframes color {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

Simplemente modificando un par de líneas, ya creamos algo diferente. Como ya mencionamos, hemos cambiado los valores de velocidad y tamaño de fondo, para obtener una animación más agradable.

Por supuesto, si queréis ver como funciona en realidad, os dejamos los dos ejemplos animados que hemos creado en CodePen, para verlo en directo.

Conclusiones

Aunque en conjunto pueda parecer que hemos escrito mucho CSS, no son más que tres conceptos los que hemos aplicado: color de fondo, máscara de recorte y animación. Recordando las propiedades usadas, y sabiendo como funcionan sus valores, podemos crear fondos y animaciones de muchos tipos. Es todo cuestión de ir experimentando y probando lo que se os ocurra.

Y aunque solo nos hemos centrado en colores en este artículo, se podría aplicar una imagen perfectamente, o usarlo en conjunto con la pseudo-clase hover, para que el movimiento solo se produzca al pasar el puntero del ratón por encima. Las posibilidades son casi infinitas.

Esperamos que os haya gustado este pequeño tutorial sobre textos y animación en CSS. Y como siempre, podéis compartir con nosotros vuestros proyectos y experimentos de este tipo en los comentarios. ¡Estamos deseando verlos!