Liukuväriteksti CSS:llä: tee se hyvin

Liukuväriteksti tehdään CSS:llä piirtämällä liukuväri tekstielementin taustaksi, rajaamalla tausta kirjainten muotoon background-clip: text -ominaisuudella ja tekemällä itse teksti läpinäkyväksi, jotta liukuväri kuultaa läpi. Siihen tarvitaan kolme määrittelyä, se toimii kaikissa nykyisissä selaimissa ja pysyy oikeana, valittavana ja haettavana tekstinä eikä muutu kuvaksi.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Loppu tästä oppaasta käsittelee, mitä kolmen rivin versio tekee väärin: puuttuvat varavärit, kontrasti, monirivinen teksti, katkeavat alaluvut ja muotoilukysymys siitä, milloin liukuväriteksti ylipäätään auttaa. Liukuvärikirjaimista some- ja brändityössä, verkkosivun sijaan, kerrotaan oppaassa tekstitehosteet.

Kestävä liukuväritekstin resepti varaväreineen

Jos selain ottaa käyttöön color: transparent mutta ei rajausta, teksti katoaa. Suojaudu siltä: anna elementille liukuvärin sävyistä otettu yksivärinen väri ja vaihda läpinäkyvään versioon vasta, kun selain vahvistaa tuen. Lisää nollaus pakotettujen värien tilaan, jossa järjestelmä korvaa värisi ja tekstin täytyy pysyä näkyvissä.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

MDN:n background-clip-sivu dokumentoi text-arvon ja sen nykyisen tuen.

Kontrasti: tarkista liukuvärin molemmat päät

Kontrastin tarkistin ottaa yhden tekstivärin, mutta liukuvärillisessä tekstissä värejä on monta. Sanat ovat yhtä luettavia kuin niiden heikoin kohta, joten tarkista vaalein ja tummin väripiste taustaa vasten ja katso myös keskikohtaa, koska sRGB-sekoitus voi painua kummastakin päästä vaaleammaksi tai harmaammaksi. Suurelle otsikkotekstille WCAG vaatii vähintään 3:1, normaalille tekstille 4,5:1. Värien kontrasti selittää suhdeluvut.

Monirivisen liukuväritekstin ja katkeavien kirjainten korjaus

Rivittyvällä inline-elementillä selain asettaa yhden taustan kaikkien rivien yli ikään kuin ne olisivat yksi nauha, joten ensimmäinen rivi saa liukuvärin alun ja viimeinen lopun. Yleensä haluat, että jokainen rivi kantaa koko liukuvärin. box-decoration-break: clone tekee sen. Lohkoelementeillä, kuten otsikolla, liukuväri kattaa jo koko laatikon, joten pitkä liukuväri leveän otsikon yli voi näyttää lyhyillä riveillä vain keskikohtansa.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Katkeavat alaluvut ovat toinen yllätys. Tausta piirtyy vain elementin laatikkoon, joten hyvin tiukalla line-height-arvolla kirjainten sen alle ulottuvat osat jäävät läpinäkyviksi ja katoavat. Noin 1,1:n riviväli tai hieman alapaddingia korjaa asian. Kursiiviset otsikkofontit voivat menettää viimeisen kirjaimensa oikean kärjen samasta syystä, ja hieman vaakapaddingia auttaa.

Milloin liukuväriteksti toimii ja milloin ei

Hyvä nyrkkisääntö: liukuväriteksti on korostus, kuten kursiivi. Yksi korostettu sana otsikossa vetää katseen, kokonainen kappale väsyttää sen. Paksut fontinpaksuudet auttavat, koska ohuet viivat eivät näytä tarpeeksi väriä, jotta ne näyttäisivät liukuvärinä. Jos muu sivu käyttää jo liukuvärillisiä taustoja, tasainen kirjaintyyppi on yleensä vahvempi valinta; teksti liukuvärillä taustalla käsittelee sen tapauksen.

Liukuvärillisen tekstin animointi

Jotta väri virtaisi kirjainten läpi, tee taustasta tekstiä suurempi ja liikuta sitä. Mitoita se 200 % leveäksi ja animoi background-position edestakaisin alternate-arvolla, jolloin silmukan alkaessa uudelleen ei ole hyppyä. Huomioi vähennetyn liikkeen asetukset ja pidä liike hitaana: välke muutaman sekunnin välein näyttää viimeistellyltä, nopea kierto näyttää varoitukselta.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Samat taustatempuut ovat CSS-animoitujen liukuvärien perusta laajemmin, ja täytön sijaan liukuvärireunukset käsitellään oppaassa CSS-liukuvärireunus.