CSS mesh-liukuväri: näin rakennat sen säteittäisistä kerroksista

CSS mesh -liukuväri on tausta, jossa väri sekoittuu useaan suuntaan yhtä aikaa, ikään kuin pigmenttilammikot olisivat imeytyneet toisiinsa. CSS:ssä ei ole mesh-funktiota, ja SVG:lle luonnostellut mesh-liukuvärit eivät koskaan päätyneet selaimiin, joten verkkoversio on jäljitelmä: kolmesta viiteen radial-gradient()-kerrosta pinottuna tasaisen värin päälle, kukin häipyen väriin transparent. Huolella tehtynä se on riittävän lähellä, ettei kukaan erota eroa, painaa muutaman sata tavua ja pysyy terävänä kaikissa kooissa.

Jos haluat teoriaa ensin, eli mikä mesh on ja miksi se tuntuu orgaaniselta, lue mesh-liukuvärit. Tämä opas käsittelee sen rakentamista koodilla.

Miten kerrostamistapa toimii

Jokainen kerros on yksi värikohta. Sen paikka on at-arvo, sen ulottuvuus on häipymämatka ja sen voimakkuus on värin alfa. Koska background-imagen ensimmäinen liukuväri piirretään päälle, järjestyksellä on täällä vähemmän merkitystä kuin luulisi: jokainen kerros on enimmäkseen läpinäkyvä, joten ne sekoittuvat päällekkäisissä kohdissa. Pohjan background-color näkyy kaikkialla, minne yksikään lammikko ei yllä.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}

Vaihe vaiheelta: rakenna oma CSS mesh -liukuväri

1. 1

   Valitse pohja

   Valitse tasainen väri, joka näkyy lammikoiden välissä. Tummilla pohjilla lammikot hehkuvat, vaaleilla ne tuntuvat vesiväreiltä. Pohja on myös varavärisi, jos liukuvärit eivät toimi.

2. 2

   Valitse kolmesta viiteen toisiinsa sopivaa väriä

   Naapurisävyt sekoittuvat puhtaasti. Vastakohdat, kuten sininen ja oranssi, kohtaavat harmaana tahrana. Mutaiset liukuvärit selittää miksi ja miten sen voi välttää.

3. 3

   Sijoita lammikot keskustan ulkopuolelle

   Työnnä pisteitä kohti kulmia ja reunoja ja anna ainakin yhden olla osittain laatikon ulkopuolella, esimerkiksi at 110% 0%. Keskitetyt lammikot näyttävät maalitaululta.

4. 4

   Vaihtele ulottuvuutta ja voimakkuutta

   Anna yhdelle värille suurin häipymä ja korkein alfa, jotta se johtaa. Pidä korostus pienenä ja heikompana. Yhtä suuret lammikot näyttävät mekaanisilta.

5. 5

   Sekoita parempaan väriavaruuteen

   Lisää in oklab jokaiseen kerrokseen, esimerkiksi radial-gradient(in oklab circle at 15% 20%, ...), missä se on tuettu. Päällekkäisyydet pysyvät kirkkaampina kuin sRGB:ssä.

6. 6

   Viimeistele rakeisuudella

   Suuret pehmeät häivytykset juovittuvat monilla näytöillä. Himmeä kohinapeite korjaa sen ja tuo painetun tunnun; katso alla.

Pehmeämmät sekoitukset sumennuksella

Säteittäiset häivytykset ovat pehmeitä, mutta niiden muodot ovat selvästi pyöreitä. Sumennus pehmentää ympyrät orgaanisemmiksi. Laita kerrokset pseudoelementille, sumenna se ja tee siitä ylisuuri negatiivisella inset-arvolla, jotta sumennetut reunat eivät häipyisi sivuun. isolation: isolate pitää negatiivisen z-indexin komponentin sisällä.

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}

Rakeisuuden lisääminen CSS mesh -liukuväriin

Rakeisuus tekee kaksi työtä. Se rikkoo leveissä, vähäkontrastisissa häivytyksissä näkyvät portaat ja antaa pinnalle tuntuvan, filmimäisen laadun, joka saa liukuvärit näyttämään harkituilta oletusarvojen sijaan. CSS:ssä tavallinen lähde on SVG:n feTurbulence-suodatin pienenä taustakuvana, kerrostettuna päälle matalalla peittävyydellä. Koko tekniikka on oppaassa CSS-kohinatekstuuri ja suunnitteluperustelut oppaassa rakeiset liukuvärit.

Mesh-liukuvärin animointi

Liukuvärin paikkoja ei voi animoida sellaisenaan, mutta rekisteröidyt mukautetut ominaisuudet voi. Määrittele jokainen liikkuva koordinaatti @property:lla, käytä sitä liukuvärin sisällä ja animoi ominaisuutta. Pidä liike hitaana ja kytke se pois niiltä, jotka pyytävät vähennettyä liikettä.

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

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

Tämän animaation jokainen ruutu piirtää koko taustan uudelleen. Pienellä kortilla se on vähäpätöistä, koko ruudun hero-alueella se kannattaa mitata. Opas animoitu liukuväri käsittelee halvempia vaihtoehtoja, kuten ylisuuren kerroksen liikuttamisen transformilla.

Milloin käyttää kuvaa tai WebGL:ää

Shaderit käsitellään oppaassa WebGL-liukuvärit. Välimuoto on suunnitella tausta kerran elävänä materiaalina ja viedä se: Gradientlyn Markit ovat mesh-tyyppisiä materiaaleja, joissa on väri, rakeisuus, valo ja liike, ja niillä tehty suunnitelma viedään PNG- tai JPEG-kuvana tai saumattomana videosilmukkana, jonka kesto on viidestä kolmeenkymmeneen sekuntia.

GR·Y97R·RQ

August Basin

Katso tämä Mark