CSS-lineaarinen gradientti selitetty esimerkeillä

Lineaarisessa liukuvärissä värit kulkevat yhteen suuntaan, esimerkiksi vasemmalta oikealle, ylhäältä alas tai valitsemassasi kulmassa.

Kaltevuus, jossa kaksi väripysähdystä

Syntaksi

Lineaarisen kaltevuuden luomiseksi sinun on määritettävä vähintään kaksi väripistettä. Ne ovat värejä, joihin siirtymät luodaan. Se ilmoitetaan joko taustan tai taustakuvan ominaisuuksissa.

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Jos suuntaa ei määritetä, oletussiirtymä on ylhäältä alas.

Esimerkkejä

Ylhäältä alas:

background: linear-gradient(red, yellow);
Ylhäältä alas

Vasemmalle r ikea:

Voit tehdä sen vasemmalta oikealle lisäämällä ylimääräisen parametrin aloituksen alkuun linear-gradient()sanalla , joka osoittaa suunnan:

background: linear-gradient(to right, red , yellow);
Vasemmalta oikealle

Diagonaaliset kaltevuudet :

Voit myös siirtää kaltevuuden diagonaalisesti määrittämällä vaaka- ja pystysuuntaiset lähtöasennot, esimerkiksi ylhäältä vasemmalta tai alhaalta oikealta.

Tässä on näyte kaltevuudesta alkaen ylhäältä vasemmalta:

 background: linear-gradient(to bottom right, red, yellow);
Ylävasen

Kulmien avulla määritetään kaltevuuden suunta

Voit myös käyttää kulmia tarkentamaan kaltevuuden suuntaa:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Kulma määritetään kulmana vaakasuoran ja kaltevuusviivan välillä.

background: linear-gradient(90deg, red, yellow);
90 astetta

Käytä enemmän kuin kahta väriä

Et ole rajoittunut vain kahteen väriin - voit käyttää niin monta pilkulla erotettua väriä kuin haluat.

background: linear-gradient(red, yellow, green); 
Kaltevuus, jossa 3 väripistettä

Voit käyttää värejä myös muilla värisyntakseilla, kuten RGB- tai hex-koodeilla.

Kova väri pysähtyy

Et voi käyttää vain liukuvärejä siirtyäksesi häivyttävillä väreillä, mutta voit myös käyttää sitä vaihtaaksesi yhdestä kiinteästä väristä toiseen yhtenäisenä:

background: linear-gradient(to right,red 15%, yellow 15%);
Kova väri pysähtyy

Lisää tietoa:

  • CSS-käsikirja: kätevä opas CSS: ään kehittäjille