CSS radial-gradient: muodot, koot ja paikat

CSS:n säteittäinen liukuväri (radial gradient) sekoittaa väriä ulospäin pisteestä, kuin lampusta leviävää valoa. Se kirjoitetaan radial-gradient()-funktiolla ja sitä käytetään kaikkialla, missä CSS ottaa kuvan, yleensä background-imagessa. Ilman asetuksia se piirtää laatikon keskelle ellipsin, joka yltää kauimmaiseen kulmaan: radial-gradient(#fef3c7, #b45309) antaa vaalean keskustan, joka hehkuu ulos syvään meripihkaan.

Kaikki muu funktiossa muuttaa yhtä kolmesta asiasta: muotoa, kokoa ja paikkaa. Kun hallitset ne, sama funktio piirtää hehkuja, valokeiloja, vinjettejä, aurinkosäteitä ja värilammikot mesh-liukuvärin CSS:llä takana. Säteittäisten sekoitusten muotoilupuolesta kerrotaan oppaassa säteittäiset liukuvärit.

radial-gradient()-funktion syntaksi

/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)

Yksi sääntö yllättää ihmiset: ympyrän koon täytyy olla pituus, kuten 200px, ei koskaan prosentti, koska suorakulmion prosentilla ei ole yhtä sädettä. Ellipsit hyväksyvät prosentit, kuten ellipse 60% 40%. MDN:n radial-gradient()-viite luettelee koko kieliopin.

Ympyrä vastaan ellipsi

Ellipsi venyy laatikon mukana, joten leveällä bannerilla hehku on leveä ja korkealla tarinalla korkea. Ympyrä pysyy pyöreänä, mitä laatikko tekeekin. Käytä ellipsejä taustoihin, joiden pitää täyttää säiliönsä tasaisesti, ja ympyröitä kaikkeen, minkä pitää näyttää valonlähteeltä, planeetalta tai painikkeen hehkulta.

Kokoavainsanat: closest-side ja farthest-corner

Koko määrää, mihin viimeinen värikohta osuu, eli missä liukuvärin päättyvä muoto sijaitsee. Neljä avainsanaa mittaavat keskipisteestä laatikon lähimpään tai kauimmaiseen sivuun tai kulmaan. Ne näyttävät erilaisilta vain, kun keskipiste on sivussa, joten alla olevat esimerkit alkavat kaikki kohdasta 30% 40%.

Käytännössä closest-side sopii rajattuihin muotoihin, kuten pisteisiin ja merkkeihin, koska väri ei koskaan valu lähimmän reunan yli. farthest-corner sopii taustoihin, koska sekoitus peittää koko laatikon. Kun tarvitset tarkan hallinnan, anna pituus: circle 180px at 50% 0 on 180 pikselin hehku, joka riippuu yläreunasta.

Paikan asettaminen at-sanalla

Avainsana at asettaa keskipisteen samoilla arvoilla kuin background-position: avainsanoilla kuten at top right, prosenteilla kuten at 20% 80% tai pituuksilla kuten at 40px 60px. Keskipiste voi olla jopa laatikon ulkopuolella, kuten at 50% 120%, joka antaa alareunan alta nousevan horisonttihehkun.

Kerrostetut säteittäiset hehkut

Hyödyllisin säteittäinen malli on useita liukuvärejä pinottuna yhteen background-imageen, kukin häipyen väriin transparent, tasaisen tumman värin päällä. Jokainen kerros on valolammikko omassa paikassaan. Koska ensimmäinen kerros piirretään päälle, laita kirkkain ja pienin hehku ensin.

.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}

Kaksi muuta mallia kattaa useimmat jäljellä olevat työt. Vinjetti tummentaa reunat: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) kerrostettuna valokuvan päälle. Valokeila seuraa osoitinta, kun sen paikka syötetään mukautetuista ominaisuuksista, kuten radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), ja muutama rivi JavaScriptiä asettaa --x:n ja --y:n pointermove-tapahtumassa.

Toistuvat säteittäiset liukuvärit

repeating-radial-gradient() toistaa värikohtansa ulospäin, kunnes laatikko on täynnä, joten kovien värikohtien pari muuttuu renkaiksi. Käytä värikohtien paikoille pituuksia, jotta renkaan leveys pysyy vakiona. Se on aaltoilun, maalitaulun ja puolisävymäisten tekstuurien perusta, ja lisää löytyy oppaasta CSS-kuviot.