Kartiomaiset liukuvärit: väriympyrät, kaaviot ja kiilto

Kartiomainen liukuväri vaihtaa väriä pyyhkäistessään keskipisteen ympäri, kuten kellon viisari liikkuu taulunsa ympäri. Lineaarinen liukuväri muuttuu viivaa pitkin ja säteittäinen liikkuessaan ulospäin, mutta kartiomainen liukuväri muuttuu kulman mukaan. Katso suoraan alas kartioon, joka on maalattu kaistoin, niin näet saman asian, mistä nimi tulee. Figma ja jotkin muut työkalut kutsuvat sitä kulmaliukuväriksi.

Tuo kulmapohjainen käytös tekee kartiomaisista liukuväreistä hyviä asioissa, joita muut liukuvärit eivät osaa: väriympyrät, piirakkakaaviot, harjattu metalli, tähtipurskeet ja valonsäteet. Tämä opas käy jokaisen läpi elävin esimerkein. Koko CSS-syntaksi on oppaassa CSS conic-gradient().

Miten kartiomainen liukuväri toimii

Asetat keskipisteen, aloituskulman ja luettelon väreistä kulmineen tai prosentteineen. Nolla astetta osoittaa ylös, ja pyyhkäisy kulkee myötäpäivään. Kohta, jossa yksi väri päättyy ja seuraava alkaa, on pysäytyspiste, aivan kuten muissa liukuväreissä, paitsi että 25 % tarkoittaa neljänneskierrosta, ei neljännestä leveydestä.

Sillä ensimmäisen värin toistolla lopussa on merkitystä. Jos viimeinen pysäytyspiste eroaa ensimmäisestä, saat kovan viivan suoraan ylös keskipisteestä, jossa pyyhkäisy kohtaa oman alkunsa. Väriympyrä -opas selittää, miten tällaisen ympyrän sävyt luetaan.

Kartiomaisia liukuväriesimerkkejä suunnitteluun

Piirakka- ja donitsikaaviot

Anna jokaiselle värille alku- ja loppukulma, niin liukuvärista tulee piirakkakaavio ilman kuvaa ja ilman kaaviokirjastoa. Lisää pyöreä maski, niin siitä tulee donitsi. Tämä sopii yksinkertaiselle, koristeelliselle datalle julkaisuissa ja dioissa. Oikeaan raportointiin lisää nimiöt, koska pelkkään väriin nojaava kaavio epäonnistuu ihmisille, jotka näkevät värit eri tavalla.

.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}

Metalli ja kiilto

Harjattu teräs, vinyylilevy ja satiininen nappi heijastavat kaikki valoa kiiloina keskipisteensä ympärillä. Vuorottelevat vaaleat ja tummat harmaat kartiomaisessa liukuvärissä jäljittelevät sitä. Käytä neljää tai kuutta vuorottelua: vähemmällä se näyttää rantapallolta, useammalla kaaviolta. Sävytä harmaat hieman lämpimiksi kullalle tai messingille ja hieman sinisiksi kromille.

Säteet ja purskeet

Aseta keskipiste kehyksen yläpuolelle tai ulkopuolelle, niin kapea kirkas kiila muuttuu valonheittimen säteeksi tai ikkunasta tulevaksi valokiilaksi. Toistuva kartiomainen liukuväri vuorottelevin kiilloin muuttuu aurinkopurskeeksi, retrojuliste-alennusmyyntien tehokeinoksi. Pidä purskeet suuren, yksinkertaisen otsikon takana, sillä ne ovat äänekkäitä yksinään.

Kimmellys

Todellinen kimmellys vaihtaa sävyä katselukulman mukaan. Pehmeä kartiomainen pastellien pyyhkäisy, keskipiste sivussa, pääsee yllättävän lähelle. Se on useimpien holografisten liukuvärien pohja.

Kartiomainen, säteittäinen vai lineaarinen

Jos olet epävarma, kysy, mitä kuvasi valo tekee. Pinnan yli osuva valo on lineaarista. Lähteestä tuleva valo on säteittäistä. Pyörivästä tai kaarevasta heijastuva valo on kartiomaista. Liukuvärityypit näyttää ne kaikki rinnakkain.

Kartiomaisten liukuvärien onnistuminen

1. 1

   Päätä, mihin keskipiste menee

   Keskitetty kartiomainen liukuväri näyttää kaaviolta tai ympyrältä. Keskipisteen siirtäminen kulmaan tai kehyksen ulkopuolelle muuttaa sen valoksi ja kiilloksi.

2. 2

   Sulje ympyrä

   Toista ensimmäinen väri lopussa, ellet halua näkyvää saumaa. Kovat saumat ovat vain kaavioita ja purskeita varten.

3. 3

   Piilota tai pehmennä kärki

   Jokainen kartiomainen liukuväri kutistuu terävään kärkeen keskellä. Aseta sen päälle logo, ympyrä tai kehyksen reuna tai sumenna kerros.

4. 4

   Käytä aloituskulmaa

   Aloituksen kääntäminen ominaisuudella from siirtää sitä, mihin kirkkain kiila osuu, mikä on usein kaikki, mitä sommitelma tarvitsee.

5. 5

   Yhdistä muihin tyyppeihin

   Hienovarainen kartiomainen kiilto lineaarisen tai säteittäisen pohjan päällä lisää materiaalin tuntua kiinnittämättä huomiota itseensä.

Kartiomaiset liukuvärit tekevät myös kuvioita: toistuva versio neljällä kovalla neljänneksellä piirtää shakkilaudan yhdellä rivillä. CSS-kuviot kattaa ne.