Toistuva lineaarinen CSS-liukuväri: raidat ja kuviot

Toistuva lineaarinen liukuväri toistaa CSS:ssä lyhyttä väripisteiden jaksoa viivaa pitkin, kunnes elementti täyttyy. repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) luo vinot pinkit raidat, kukin 14 pikseliä leveänä, ilman kuvatiedostoa. Viimeinen piste määrää toiston pituuden, tässä 28px. Sama idea tuottaa renkaita repeating-radial-gradient()-funktiolla ja säteitä repeating-conic-gradient()-funktiolla.

Miten repeating-linear-gradient() toimii

Syntaksi on sama kuin tavallisessa lineaarisessa liukuvärissä. Ero on viimeisen pisteen jälkeen: viimeisen värin jatkamisen sijaan selain aloittaa kuvion alusta. Kaksi sääntöä tekee suurimman osan työstä.

• Viimeisen pisteen paikka on toiston pituus. Pisteet 0, 14px ja 28px toistuvat 28 pikselin välein.
• Kaksi väriä samassa kohdassa luo terävän reunan. #f472b6 0 14px, #fdf2f8 14px 28px vaihtuu pinkistä vaaleanpinkiksi kohdassa 14px sekoittumatta.
• Jokaisella pisteellä voi olla kaksi paikkaa. #f472b6 0 14px tarkoittaa tasaista pinkkiä välillä 0 ja 14px. Se on lyhyempi kuin värin kirjoittaminen kahdesti.
• Käytä raidoille pituuksia, älä prosentteja. Prosentit suhteutuvat liukuväriviivaan, joten raidat venyvät elementin koon muuttuessa.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Kopioitavat raitakuviot

Viivoitettu paperi on hyvä esimerkki epäsymmetrisestä toistosta: 22 pikseliä paperia ja yksi pikseli viivaa. Punainen marginaaliviiva saman kuvion päällä luo uskottavan muistikirjan. Lisää kuvioita, kuten ruudukoita ja pisteitä, löydät CSS-kuvioista.

Toistuvat liukuvärit vai background-size

Voit tehdä raidat myös tavallisella linear-gradient()-funktiolla ja background-size-asetuksella, joka toistaa pientä liukuvärikuvaa. Molemmat toimivat, mutta kulmissa niiden käytös eroaa.

Vinokuvioihin kannattaa kokeilla ensin toistuvaa versiota. Shakkiruutuihin ja ruudukoihin tarvitaan kaksi suuntaa yhtä aikaa, joten background-size ja kerrokselliset liukuvärit ovat yksinkertaisempi ratkaisu.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}

Shakkiruudun toinen väri alkaa paikasta 0. Piste ei voi sijaita edeltäjäänsä ennen, joten selain siirtää sen viimeisen värin loppukohtaan. Näin syntyy terävä reuna ilman luvun toistamista. Lyhennys toimii kaikissa liukuväreissä, toistuvissa ja tavallisissa.

Renkaat repeating-radial-gradient()-funktiolla

Säteittäinen versio toistuu keskuksesta ulospäin, joten raidoista tulee renkaita. Siirrä keskusta at-arvolla, niin väreet leviävät kulmasta. Kuten säteittäisissä liukuväreissä, circle pitää renkaat pyöreinä. Oletusellipsi venyttää ne laatikon muotoon.

Säteet repeating-conic-gradient()-funktiolla

Kartioliukuvärit kiertävät pisteen ympäri, joten niiden väripisteet ilmaistaan kulmina. Valitse toisto, jolla 360 jakautuu tasan, kuten 20, 30 tai 45 astetta. Muuten viimeinen säde on muita eri levyinen. Pidä taustan kahden värin valoisuus lähellä toisiaan. Vahvakontrastiset säteet värisevät näytöllä ja vievät huomion muulta. Täysi syntaksi löytyy CSS-kartioliukuväreistä.

Sahalaitaisten raitareunojen korjaaminen

Vinot terävät reunat voivat näyttää portaittaisilta, ja joillakin zoomaustasoilla selain piirtää ne epätasaisesti. Silloin muutama raita näyttää muita paksummalta. Anna jokaiselle reunalle pieni siirtymä täydellisen hypyn sijaan.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

Animoitu vinoraitainen etenemispalkki

background-position-arvon siirtäminen täsmälleen yhden toiston verran liikuttaa raitoja ilman hyppyä. Kun kuvion kulma on 45 astetta ja toisto 28px, vaakasuuntainen matka on toiston pituus jaettuna kulman sinillä, noin 39,6px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

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

Suurempiin animoituihin taustoihin katso animoidut CSS-liukuvärit, jossa esitellään kevyempiä tapoja. Raidat ja renkaat sopivat yksityiskohtiin, lippuihin ja lataustiloihin. Kun haluat omaksi tunnistettavan taustan, Gradientlyn Markit tuovat materiaalia, valoa ja rakeisuutta, joita toistuva kuvio ei tarjoa. Ne piirtyvät jokaiseen käyttämääsi suunnittelukokoon.