Lyhyesti
- Liukuvärin väripysäkit ovat kohtia, joissa saavutetaan tietty väri, kirjoitettuina väriksi ja sijainniksi kuten
#7c3aed 40%. - Ilman sijainteja pysäkit jaetaan tasaisesti, mikä näyttää harvoin luonnollisimmalta.
- Siirtymävihje on kahden pysäkin välinen yksittäinen prosenttiarvo, joka siirtää sekoituksen puoliväliä lisäämättä väriä.
- Kaksi pysäkkiä samassa sijainnissa tekee jyrkän reunan; näin CSS:llä syntyvät raidat ja terävät kaistat.
- Useat pehmennyskäyrää seuraavat välipysäkit poistavat lineaarisen häivytyksen alun ja lopun näkyvän rajan.
Tällä sivulla
Liukuvärin väripysäkit ovat kohtia, joissa liukuväri saavuttaa tietyn värin. CSS:ssä pysäkki on väri ja valinnainen sijainti, kuten #7c3aed 40%, ja selain sekoittaa vierekkäiset pysäkit suoraviivaisesti. Sijainti määrää lähes kaiken: pehmeyden tai äkillisyyden, hallitsevan värin ja häivytyksen alun näkyvän sauman. Pysäkkien siirto parantaa usein enemmän kuin värien vaihto.
Miten liukuvärin väripysäkit toimivat
Liukuväriviiva kulkee 0 prosentista 100 prosenttiin. Pysäkki kiinnittää värin sen pisteeseen. Ilman sijainteja selain jakaa pysäkit tasaisesti, joten kolme väriä osuvat 0, 50 ja 100 prosenttiin. Jokaisen parin välillä väri muuttuu vakionopeudella. Täysi syntaksi löytyy MDN:n linear-gradient()-ohjeesta.
#1e3a8a, #f472b6Tulos
#1e3a8a 20%, #f472b6 80%Tulos
#1e3a8a, 30%, #f472b6Tulos
#1e3a8a 50%, #f472b6 50%Tulos
#1e3a8a 0 40%, #f472b6 40% 100%Tulos
#1e3a8a 10px, #f472b6 200pxTulos
Miksi tasaiset pysäkkivälit näyttävät keinotekoisilta
Aito valo muuttuu harvoin tasaisesti. Auringonlasku on enimmäkseen yhtä väriä ja kapea muutoskaista horisontissa; varjo enimmäkseen välisävyä lyhyellä reunasiirtymällä. Tasaiset välit antavat kaikille saman osuuden ja näyttävät kaaviolta. Valitse johtava väri ja anna sille eniten tilaa.
Siirtymävihjeet: puolivälin siirtäminen
Siirtymävihje on kahden pysäkin väliin asetettu pelkkä prosenttiarvo. Se ei lisää väriä vaan siirtää täsmällistä puoliväriä. 20 prosentin vihje tarkoittaa varhaista puoliväliä: toinen väri saapuu nopeasti ja viipyy pitkään. Vihje on kevein keino tehdä kahden värin liukuväristä vähemmän mekaaninen.
Jyrkät pysäkit raitoihin ja kaistoihin
Samassa sijainnissa olevien pysäkkien välissä ei ole sekoitusmatkaa, joten väri vaihtuu heti. Näin piirretään raidat, jaetut taustat, edistymispalkit ja liput pelkällä liukuvärillä. Kaksoissijainti colour start end lyhentää kirjoitusta. Toistuvat liukuvärit monistavat saman ajatuksen, kuten toistuvat lineaariset liukuvärit kertoo.
Pehmennetyt pysäkit poistavat sauman
Lineaarisella sekoituksella on näkyvä alku ja loppu. Valokuvan tumma peite häipyy läpinäkyväksi, mutta aloitusraja näkyy usein, koska muutosnopeus hyppää nollasta täyteen. Useat pehmennyskäyrän välipysäkit korjaavat sen: muutos alkaa hitaasti, kiihtyy ja rauhoittuu. Tämä auttaa erityisesti tekstipeitteissä ja läpinäkyvissä liukuväreissä.
/* Linear: a visible edge where the fade starts */
.scrim-linear {
background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}
/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
background: linear-gradient(180deg,
rgba(10, 12, 20, 0) 40%,
rgba(10, 12, 20, 0.02) 46%,
rgba(10, 12, 20, 0.08) 52%,
rgba(10, 12, 20, 0.18) 58%,
rgba(10, 12, 20, 0.32) 66%,
rgba(10, 12, 20, 0.48) 74%,
rgba(10, 12, 20, 0.62) 82%,
rgba(10, 12, 20, 0.73) 91%,
rgba(10, 12, 20, 0.8) 100%);
}Pysäkkien sijoittelu käytännössä
- 1
Valitse johtava väri
Anna sille 50-70 prosenttia viivasta. Se määrää tunnelman.
- 2
Sijoita muutos katseen kohteeseen
Aseta nopein värimuutos lähelle kiintopistettä, älä oletuksena keskelle.
- 3
Lisää vihjeitä ennen värejä
Jos sekoitus tuntuu väärältä, siirrä ensin puoliväliä. Lisävärit lisäävät mutkikkuutta.
- 4
Tarkista puolivärit
Katso jokaisen parin puoliväri. Jos se on harmaa, lisää väliväri tai sekoita OKLCH:ssa, kuten liukuvärin interpolointi selittää.
- 5
Pehmennä pitkät häivytykset
Lisää välipysäkkejä läpinäkyväksi tai tasaiseksi väriksi häipyviin pintoihin, jotta saumaa ei näy.
Vältä
- Samaa osuutta jokaiselle värille
- Uutta väriä joka ongelman korjaukseen
- Lineaarisia läpinäkyvyysliukuja tekstin takana
- Jyrkkiä pysäkkejä pehmeän siirtymän paikalla
Tee näin
- Yksi johtava väri, muut tulevat myöhään
- Siirtymävihjeet sekoituksen säätöön
- Pehmennetyt pysäkit tummennuksiin ja häivytyksiin
- Jyrkät pysäkit vain raitoihin ja kaistoihin
CSS:n lineaariset liukuvärit esittelee pysäkit yksinkertaisimmillaan ja koko syntaksin, ja liukuvärityypit näyttää niiden toiminnan säteittäisissä ja kartiomaisissa liukuväreissä. Gradientlyssä Mark hoitaa sekoituksensa ja valonsa joka koossa, joten voit suunnitella heti ja käyttää ajan sanoihin.
Usein kysyttyä
Mikä on liukuvärin väripysäkki?
Liukuvärin piste, jossa saavutetaan tietty väri. CSS:ssä se kirjoitetaan värinä ja valinnaisena sijaintina, kuten #7c3aed 40%.
Mitä tapahtuu ilman pysäkkien sijainteja?
Selain jakaa ne tasaisesti 0 prosentista 100 prosenttiin. Kolme väriä osuu 0, 50 ja 100 prosenttiin.
Mikä on CSS-liukuvärin siirtymävihje?
Yksittäinen prosenttiarvo kahden pysäkin välissä, kuten #4c1d95, 25%, #f9a8d4. Se siirtää sekoituksen puoliväliä lisäämättä väriä.
Miten teen CSS-liukuväriin terävän rajan?
Anna kahdelle pysäkille sama sijainti, esimerkiksi #0f172a 50%, #f8fafc 50%, tai käytä kaksoissijaintia #0f172a 0 50%, #f8fafc 50% 100%.
Miten häivytän liukuvärin pehmeästi läpinäkyväksi?
Lisää useita välipysäkkejä, joiden peittävyys seuraa pehmeän alun ja lopun käyrää. Yksinkertaisen kahden pysäkin liu'un alussa näkyy usein raja.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme