Lag tekst med animert gradient-bakgrunn
Få liv i teksten din med disse CSS-triksene.
Publisert
kode24 er kanskje over snittet glad i gradienter.
Vi har dem bak faktabokser, vi har dem i headere og vi har dem bak tekst – blant annet i slike sitater:
Sjekk denna gradienten!
kode24, hele tida
Så hvordan får man til tekst med gradient-bakgrunn?
kode24-venn Mikael Brevik gir deg svaret i dagens kodesnutt! Du finner den ti minutter lange videosnutten øverst i artikkelen.
Trikset ligger i blant annet «background-clip: text;».
Brevik viser deg dog ikke bare hvordan du får statiske gradienter bak tekst, men også hvordan du animerer dem.
Det er faktisk litt mer komplisert enn man kanskje skulle tro, men kan bli riktig så kult.
Se selv:
See the Pen background-clip + hue-rotate by Mikael Brevik (@mikaelbr) on CodePen.
