CSS Linearni gradijent objašnjen s primjerima

U linearnom gradijentu boje teku u jednom smjeru, na primjer slijeva udesno, odozgo prema dolje ili bilo kojem kutu koji odaberete.

Gradijent s dva zaustavljanja u boji

Sintaksa

Da biste stvorili linearni gradijent, morate definirati najmanje dva zaustavljanja u boji. To su boje među kojima se stvaraju prijelazi. Deklarira se na svojstvima pozadine ili pozadine slike .

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

Ako nije naveden smjer, zadani prijelaz je od vrha prema dnu.

Primjeri

Od vrha do dna:

background: linear-gradient(red, yellow);
Od vrha do dna

Lijevo Za r ight:

Da bi se s lijeva na desno, dodate dodatni parametar na početku linear-gradient()počevši s riječi na što ukazuje smjer:

background: linear-gradient(to right, red , yellow);
S lijeva nadesno

Dijagonalni gradijenti :

Gradijent također možete prelaziti dijagonalno određivanjem vodoravnog i okomitog početnog položaja, na primjer, gore-lijevo ili dolje-desno.

Evo primjera gradijenta koji započinje gore lijevo:

 background: linear-gradient(to bottom right, red, yellow);
Gore lijevo

Korištenje kutova za određivanje smjera gradijenta

Također možete koristiti kutove kako biste preciznije odredili smjer gradijenta:

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

Kut je naveden kao kut između vodoravne crte i linije gradijenta.

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

Korištenje više od dvije boje

Niste ograničeni na samo dvije boje - možete koristiti onoliko boja koliko odvojite zarezom.

background: linear-gradient(red, yellow, green); 
Gradijent s 3 zaustavljanja u boji

Za određivanje boja možete koristiti i druge sintakse boja poput RGB ili hex kodova.

Tvrda boja se zaustavlja

Ne možete koristiti samo gradijente za prijelaz s blijedećim bojama, već ga možete koristiti i za trenutnu promjenu iz jedne pune boje u drugu jednobojnu:

background: linear-gradient(to right,red 15%, yellow 15%);
Tvrda boja se zaustavlja

Više informacija:

  • Priručnik za CSS: priručnik za CSS za programere