CSS-kuviot toistuvilla liukuväreillä

CSS-kuviot ovat toistuvia taustoja, kuten raitoja, ruudukkoja, pisteitä ja ruutuja, jotka piirretään kokonaan liukuvärifunktioilla. Kaksi ideaa saa ne toimimaan. Kovat värikohdat, joissa kaksi värikohtaa jakaa saman paikan, muuttavat liukuvärin teräväksi reunaksi. Toisto, joko repeating-*-liukuvärifunktioilla tai background-size-laatoituksella, muuttaa yhden reunan kuvioksi. Tulos painaa muutaman tavun, skaalautuu täydellisesti ja ottaa värinsä CSS-muuttujistasi.

Miten kovat värikohdat tekevät muotoja

Liukuväri sekoittuu vierekkäisten värikohtien välillä. Jos seuraava värikohta alkaa täsmälleen siitä, mihin edellinen päättyi, sekoittumiseen ei ole matkaa, ja väri vaihtuu kovana viivana. Lyhenne tälle on väri kahdella paikalla, kuten #1e293b 0 10px, joka pitää värin tasaisena 0:sta 10 pikseliin. Opas CSS linear-gradient käsittelee värikohdat, vihjeet ja kovat pysäytykset tarkemmin.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Raidat repeating-linear-gradientilla

repeating-linear-gradient() toistaa värikohtaluettelonsa liukuviivaa pitkin, kunnes elementti on täynnä. Yhden toiston pituus on viimeisen värikohdan paikka, joten 0 10px, 10px 20px toistuu 20 pikselin välein. Muuta kulmaa vinoja raitoja varten ja muuta kahden kaistan suhdetta hienoraitoja tai reheviä markiisiraitoja varten.

Ruudukot, pisteet ja laatat background-sizella

Joitakin kuvioita ei voi piirtää yhdellä toistuvalla liukuvärillä: pisteruudukko vaatii toistoa kahteen suuntaan. Ratkaisu on piirtää yksi laatta, kuten yksi piste tai ruudukon yksi kulma, ja asettaa background-size laatan kokoon. Taustat toistuvat oletuksena, joten laatta täyttää elementin.

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

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

Ruudukko on kaksi liukuväriä: toinen piirtää 1 px:n vaakaviivan jokaisen laatan yläreunaan, toinen pystyviivan sen vasempaan reunaan. Pisteet ovat pieni säteittäinen liukuväri, joka muuttuu läpinäkyväksi 2 pikselin jälkeen. Shakkiruudukko käyttää neljänneksiin jaettua kartiomaista liukuväriä, minkä vuoksi se tarvitsee vain yhden kerroksen.

Gingham, tartaani ja siksak

Puoliläpinäkyvien raitojen kerrostaminen tekee kudottuja kuvioita: siellä, missä vaaka- ja pystykaista ylittävät toisensa, niiden värit kasautuvat ja ruutu tummenee. Se on gingham. Lisää toinen, ohuempi raitojoukko toisella värillä, ja siitä tulee tartaani. Siksakit syntyvät neljästä kolmiomaisesta kulmasta, joista jokainen on piirretty 25 %:n kovalla pysäytyksellä eri kulmassa.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Liikkuvat raidat edistymispalkkeihin

Animoidut vinoraidat ovat klassinen tapa näyttää, että jokin on yhä työn alla. Piirrä raidat laattana background-sizella ja siirrä background-position täsmälleen yhden laatan leveyden verran. Koska loppuruutu vastaa alkuruutua, silmukassa ei ole näkyvää hyppyä. Pidä se pienillä elementeillä ja pysäytä se niiltä, jotka haluavat vähennettyä liikettä.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

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

Kuvioiden mitoitus, teemoitus ja skaalaus

Kirjoita värikohtien paikat ja laattojen koot pikseleinä tai em-yksiköinä, älä prosentteina. Prosentit riippuvat elementin koosta, joten raidat venyvät epätasaisesti elementin koon muuttuessa ja reunat voivat osua pikselien väliin ja sumentua. em saa kuvion skaalautumaan ympäröivän tekstin mukana, mikä sopii kuvioiduille merkeille ja tunnisteille.

Mukautetut ominaisuudet tekevät kuvioista uudelleenkäytettäviä. Määrittele värit ja koko kerran ja vaihtele niitä komponentin tai teeman mukaan, esimerkiksi vaaleampi kuvio vaalealla teemalla ja hiljaisempi tummassa tilassa.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Kuviot tekstin takana

Kuviot ovat eräänlaista tekstuuria, ja samat säännöt pätevät: hienovaraisia, jotta ne tuntee eikä lue. Taustatekstuuri käsittelee rakeisuuden, paperin ja kankaan; teksti vilkkailla taustoilla käsittelee sanojen pitämisen luettavina päällä.