CSS Gradijenti (Linear & Radial)
Uvod u CSS Gradijente
Što su CSS Gradijenti?
CSS gradient funkcije omogućuju glatke prijelaze između dvije ili više boja unutar elementa.
CSS definira tri vrste gradijenta:
- Linearni gradijenti
- Radijalni gradijenti
- Konusni gradijenti
Zašto koristiti CSS gradijente:
- Vizualno su atraktivni
- Jednostavni su za postavljanje
Linearni gradijent (linear-gradient)
Linearni gradijent ide u ravnoj liniji: dolje, gore, lijevo, desno ili dijagonalno.
Najjednostavnija sintaksa je:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Primjer: crvena boja može zauzeti prvih 20% elementa, a zatim počinje prijelaz u plavu.
Radijalni gradijent (radial-gradient)
Radijalni gradijent počinje iz središnje točke elementa.
Može biti u obliku:
- Elipse
- Kruža
Centar se može pomicati pomoću dijela poput at top left.
Ponavljajući gradijenti
Ponavljajući gradijenti koriste se za ponavljanje uzorka više puta.
- repeating-linear-gradient()
- repeating-radial-gradient()
Zadaci
Zadatak A: Linearni gradijent od donjeg lijevog prema gornjem desnom kutu.
Zadatak B: Radijalni gradijent u obliku kruga, centar na desnom rubu.
Zadatak C: Zastava Hrvatske s oštrim prijelazima boja.