CSS-kartiomainen liukuväri: ympyrät, piirakkakaaviot ja kiilto

CSS:n kartiomainen liukuväri pyyhkäisee värin keskipisteen ympäri, kuten kellon viisari kiertää taulunsa. Missä lineaarinen liukuväri muuttuu viivaa pitkin ja säteittäinen ulospäin keskeltä, conic-gradient() muuttuu kulman mukaan. Se alkaa ylhäältä, kulkee myötäpäivään ja sitä voi käyttää kaikkialla, missä CSS ottaa kuvan. Se tekee siitä luonnollisen työkalun väriympyröille, piirakkakaavioille, latausrenkaille ja harjatun metallin kulmakorostuksille.

Jos valitset suunnitteluun liukuvärityyppiä syntaksin opettelun sijaan, liukuvärityypit ja suunnitteluopas kartiomaisista liukuväreistä ovat parempia lähtökohtia.

conic-gradient()-syntaksi

/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)

Kulmat kulkevat myötäpäivään ylhäältä: 90deg on kolme, 180deg kuusi kellossa. Täydellinen määritelmä on MDN:n conic-gradient()-sivulla. Selaintuki on ollut yleinen nykyisessä Chromessa, Edgessä, Safarissa ja Firefoxissa jo vuosia, joten etuliitteitä ei tarvita.

Pyyhkäisyn kääntäminen ja siirtäminen

from kääntää koko liukuväriä, mikä on kätevää, kun ensimmäisen ja viimeisen värin välinen sauma muuten olisi ylhäällä. at siirtää keskipistettä. Sen siirtäminen kulmaan muuttaa ympyrän säteiden viuhkaksi, ja sen siirtäminen kokonaan laatikon ulkopuolelle antaa lempeän kulmikkaan pesun, joka ei muistuta ympyrää lainkaan.

Piirakka- ja donitsikaaviot CSS:llä

Anna jokaiselle palalle alku ja loppu ja anna jokaisen alkaa siitä, mihin edellinen päättyi. Toisen pysäytyspaikan kirjoittaminen nollana on oikotie: edellistä pienempi paikka rajataan siihen, joten uusi väri alkaa täsmälleen siitä, mihin viimeinen päättyi. Pyöristä elementti ominaisuudella border-radius: 50% ja leikkaa reikä säteittäisellä maskilla muuttaaksesi piirakan donitsiksi.

.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}

Kovat reunat kartiomaisissa liukuväreissä voivat näyttää hieman rosoisilta palojen viivoilla joissakin selaimissa. Jos se häiritsee, jätä pysäytysten väliin murto-osa asteesta, kuten #6366f1 0 39.8%, #22d3ee 40.2% 65%, jolloin reuna saa hiuksenhienon häivytyksen.

Väriympyrät sävyinterpoloinnilla

Väriympyrä tarvitsee yleensä kuusi tai seitsemän pysäytystä. Interpolointimenetelmillä voit pyytää selainta kulkemaan sävyympyrän itse. longer hue kulkee pitkän reitin kahden sävyn välillä, ja kun molemmat pysäytykset ovat sama väri, pitkä reitti on koko ympyrä, joten kaksi punaista tekee täyden spektrin.

.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}

Metallinkiilto ja korostukset

Oikea harjattu metalli ja kiillotetut levyt sieppaavat valoa kulmikkaina kaistoina, mikä on täsmälleen se, mitä kartiomainen liukuväri piirtää. Vuorottele muutamaa vaaleaa ja tummaa harmaata, epätasaisin välein, ja pinta luetaan metalliksi. Kerrostettuna matalalla peittävyydellä värin päälle sama temppu lisää kiiltoa painikkeisiin ja kortteihin. Katso työstetty esimerkki oppaasta liukuväripainikkeet.

Toistuvat kartiomaiset liukuvärit kuvioihin

repeating-conic-gradient() toistaa pysäytyslistansa kierroksen ympäri. Lyhyet, kovareunaiset pysäytykset antavat tähtipurskeita. Yhdessä background-sizen kanssa kaksivärinen neljännesmalli laatoittuu shakkilaudaksi, kuvioksi, jota on muuten hankala piirtää liukuväreillä. Lisää oppaassa CSS-kuviot.

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