Hagamos ese efecto de texto gradiente animado con propiedades personalizadas con alcance y un clip de fondo.
Pasa a CodePen y crea un lápiz nuevo.
Crea el lenguaje de marcado para tu texto. Usemos un encabezado con la palabra "Speedy":
<h1 class="boujee-text">Hello!</h1>
Luego, le daremos a nuestro body
un background-color
más oscuro:
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
Aumenta el font-size
en nuestro texto. Usa clamp
para que sea responsivo:
.boujee-text {
font-size: clamp(3rem, 25vmin, 8rem);
}
Crea dos propiedades personalizadas para los colores que vamos a usar. Aplica un linear-gradient
a background
con esos colores y rótalo 90 grados:
.boujee-text {
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / 100% 100%;
}
Crea una propiedad personalizada que puedas usar para el tamaño horizontal del fondo. Úsalo para background-size-x
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
}
Para recortar el fondo del texto, establece color
en transparent
y background-clip: text
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
En este punto, puedes dejarlo allí y experimentar con el background-position
y el gradiente que se usa en el background-image
. O bien, puedes animar ese gradiente en todo el texto. Primero, define un fotograma clave para la animación. Esto usará la propiedad personalizada --bg-size
que definiste antes. Un buen ejemplo de propiedades personalizadas con alcance que facilitan el mantenimiento.
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
Luego, aplica la animación con animation
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: move-bg 8s infinite linear;
}
Para hacer esto aún más, puedes unir tu código de animación en una consulta de medios para respetar las preferencias de movimiento del usuario:
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
Listo. 🎉 Creaste texto con gradiente animado con CSS usando propiedades personalizadas con alcance y background-clip
.
Esta es una sugerencia en su formato de video veloz. ⚡️
¿Prefieres esto en formulario de tweet? 🐦
¡Sigue siendo genial! •ᴥ•
Hero image de Vladislav Klapin en Unsplash