CSS-liukuvärigeneraattori
Rakenna liukuväri visuaalisesti ja kopioi CSS.
- Toimii selaimessasi — tekstiäsi ei lähetetä minnekään
- Ei rekisteröitymistä, ei kiintiöitä, ilmainen käyttää niin usein kuin haluat
Näin se toimii
Liukuvärit kirjoitetaan CSS:ssä yhtenä määrityksenä, jonka syntaksi on helppo muistaa väärin, etenkin kulmakäytäntö ja värirajojen sijainti. Tuloksen näkeminen säädettäessä on nopeampaa kuin sivun lataaminen uudelleen tarkistusta varten.
Kulmakäytäntö yllättää ihmiset
CSS:ssä 0 astetta osoittaa ylöspäin ja kulma kasvaa myötäpäivään, joten 90 astetta kulkee vasemmalta oikealle ja 180 astetta ylhäältä alas. Tämä poikkeaa matemaattisesta käytännöstä ja useista suunnittelutyökaluista, minkä vuoksi muualta kopioitu liukuväri tulee usein kierrettynä.
Kolme tyyppiä
Lineaarinen kulkee suoraa linjaa pitkin ja kattaa lähes kaikki todelliset käyttötarkoitukset. Säteittäinen leviää ulospäin pisteestä, mikä sopii hehkuihin ja valokeiloihin. Kartiomainen pyyhkäisee keskipisteen ympäri, ja siitä ympyräkaaviot ja värikiekot rakennetaan.
Liukuväri on kuva, ei väri
Tämä on toinen asia, joka kompastuttaa ihmisiä. CSS käsittelee liukuväriä taustakuvana, joten se toimii kohdissa background ja background-image mutta ei kohdissa color, border-color tai muualla, missä odotetaan tavallista väriä. Tekstin liukuvärit tarvitsevat background-clipin, joka on erillinen tekniikka.
Keskivärin lisääminen
Kaksi värirajaa antaa puhtaan sekoituksen. Kolmannella voit kuljettaa siirtymän toisen sävyn kautta, mikä välttää muhkean harmaan, joka syntyy, kun kaksi vastakkaista väriä sekoittuu suoraan.
CSS-liukuvärigeneraattori – kysymyksiä
Mihin suuntaan kulma menee?
0 astetta osoittaa ylös ja kulmat kasvavat myötäpäivään, joten 90 astetta on vasemmalta oikealle.
Miksi liukuväri ei toimi tekstissä?
Liukuväri on taustakuva, ei väri. Tekstin liukuvärit tarvitsevat background-clipin erillisenä vaiheena.
Milloin minun pitäisi käyttää säteittäistä tai kartiomaista?
Säteittäinen hehkuihin ja valokeiloihin, kartiomainen ympyräkaavion ja värikiekon tehosteisiin. Lineaarinen kattaa useimmat muut tapaukset.