CSS-liukuvärien perusteet verkkosuunnittelussa
CSS-liukuvärit (gradients) ovat kuvia, jotka koostuvat kahden tai useamman värin välisistä asteittaisista siirtymistä. Niitä käytetään verkkosivujen taustojen luomiseen ilman perinteisten kuvatiedostojen lataamisesta aiheutuvaa viivettä. Liukuväri-generaattori mahdollistaa näiden siirtymien visuaalisen suunnittelun ja koodin luomisen suoraan selaimessa.
Työkalun avulla voidaan määrittää liukuvärin tyyppi, säätää sen suuntaa tai muotoa sekä asettaa enintään kahdeksan yksittäistä väripistettä. Alustettaessa työkalussa on valmiina kaksi väripistettä: #6366f1 0% ja #ec4899 100%. Kun teet muutoksia asetuksiin, näet välittömästi liukuvärin esikatselun. Valmis CSS-koodi on kopioitavissa yhdellä klikkauksella.
Lineaariset liukuvärit ja kulman säätäminen
Lineaarinen (linear) liukuväri sekoittaa värejä suoralla viivalla. Värien siirtymissuunta määritetään kulman avulla asteina.
- 0° osoittaa suoraan ylöspäin.
- 90° osoittaa suoraan oikealle.
Säätämällä kulmaa välillä 0°–360° voit ohjata värisiirtymän kulkemaan mistä tahansa suunnasta mihin tahansa suuntaan. Lineaarinen liukuväri sopii tilanteisiin, joissa tarvitaan selkeäsuuntainen taustaväri esimerkiksi sivuston yläbanneriin tai painikkeisiin.
Säteittäiset liukuvärit ja muodon valinta
Säteittäinen (radial) liukuväri levittää värejä ulospäin keskipisteestä. Toisin kuin lineaarisessa mallissa, säteittäisessä liukuvärissä ei käytetä kulmaa suunnan määrittämiseen. Sen sijaan liukuvärin leviämistä ohjataan valitsemalla jompikumpi seuraavista muodoista:
- Ellipsi: Värit leviävät soikeasti, mukautuen taustana olevan elementin leveyden ja korkeuden suhteeseen.
- Ympyrä: Värit leviävät tasaisesti joka suuntaan symmetrisenä ympyränä riippumatta elementin mittasuhteista.
Säteittäisellä liukuvärillä voidaan luoda pehmeitä, kohdistettuja valoefektejä tai korostaa elementin keskiosaa.
Kartiomaiset liukuvärit
Kartiomainen (conic) liukuväri pyyhkii värejä keskipisteen ympäri samaan tapaan kuin väriympyrässä. Värien siirtymälinjat säteilevät keskipisteestä ulospäin, ja siirtymän aloituskohta määritetään kulman avulla. Kuten lineaarisessa liukuvärissä, kulman liukusäädin määrittää suunnan, jossa 0° osoittaa ylös ja 90° oikealle. Kartiomainen liukuväri on hyödyllinen esimerkiksi pyöreiden kaavioiden, mittareiden tai muiden ympyränmuotoisten visuaalisten elementtien taustoissa.
Väripisteiden hallinta ja sijoittelu
Väripisteet (color stops) määrittävät, mitä värejä liukuvärissä käytetään ja missä kohdassa siirtymää kukin väri sijaitsee. Jokainen väripiste koostuu kahdesta arvosta:
- Pisteen väri: Valittu väriarvo.
- Sijainti: Prosenttiarvo välillä 0% (liukuvärin alku) ja 100% (liukuvärin loppu).
Työkalussa on seuraavat säännöt väripisteiden hallintaan:
- Voit käyttää liukuvärissä yhteensä enintään kahdeksaa väripistettä.
- Uuden väripisteen oletussijainti on aina 50%.
- Kun kahdeksan väripistettä on lisätty, painike "Lisää väripiste" poistetaan käytöstä.
- Voit poistaa tarpeettomia pisteitä käyttämällä painiketta "Poista väripiste".
Sijoittamalla väripisteitä lähekkäin toisiaan voit luoda jyrkkiä värisiirtymiä, kun taas etäällä toisistaan olevat pisteet tuottavat pehmeän ja tasaisen sekoituksen.
Työkalun käyttö ja CSS-koodin kopiointi
Liukuväri-generaattori on suunniteltu nopeaan ja tarkkaan työskentelyyn. Kun olet valinnut asetukset, voit ottaa koodin käyttöön seuraavasti:
- Valitse osiosta "Liukuvärityyppi" joko "Lineaarinen", "Säteittäinen" tai "Kartiomainen (Conic)".
- Säädä kulmaa tai muotoa valitun tyypin mukaisesti.
- Määritä väripisteet asettamalla niille värit ja sijainnit.
- Siirry osioon "CSS", jossa näet valmiin koodin.
- Klikkaa painiketta "Kopioi CSS". Klikkauksen jälkeen painikkeen tilaksi muuttuu "Copied", mikä vahvistaa koodin kopioituneen leikepöydälle.
Jokainen liukuväri renderöidään suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun, joten käsittely tapahtuu kokonaan paikallisesti omassa laitteessasi.
Usein kysytyt kysymykset
Mitä eroa on lineaarisella, säteittäisellä ja kartiomaisella liukuvärillä?
Lineaarinen (linear) liukuväri sekoittaa värejä suoralla viivalla, jonka suunnan määrität kulmalla. Säteittäinen (radial) liukuväri levittää ne keskeltä ulospäin ympyränä tai ellipsinä. Kartiomainen (conic) liukuväri kiertää ne keskipisteen ympäri kuin väriympyrä.
Mitä ovat väripisteet?
Jokainen väripiste (color stop) on väri, joka on kiinnitetty tiettyyn kohtaan liukuvärissä – 0% alussa, 100% lopussa. Siirrä pistettä muuttaaksesi sen värin painotusta tai lisää pisteitä monipuolisemman sekoituksen luomiseksi. Voit käyttää enintään kahdeksaa pistettä.
Miten ohjaan suuntaa?
Lineaarisessa tai kartiomaisessa (conic) liukuvärissä kulman liukusäädin määrittää suunnan – 0° osoittaa ylös, 90° oikealle. Säteittäisellä (radial) liukuvärillä ei ole kulmaa; valitse sen sijaan ympyrän tai ellipsin muoto muuttaaksesi sen leviämistä.