1. Uvod u CSS gradijente
1. Što su CSS gradijenti i koja im je glavna vizualna svrha u izradi web stranica?
CSS gradijenti su prijelazi između dvije ili više boja koji se koriste za stvaranje vizualnih efekata i pozadina na web stranicama.
2. Koji se CSS property mora koristiti za postavljanje gradijenta na element?
background-image
3. Zašto je bolje koristiti CSS gradijente umjesto slika?
- Stranica se brže učitava.
- Gradijenti se mogu lakše mijenjati u CSS-u.
- Nema potrebe za dodatnim slikama.
2. Linearni gradijent (linear-gradient)
1. Najjednostavnija sintaksa:
linear-gradient(red, blue)
2. Zadani smjer gradijenta:
Od vrha prema dnu (top → bottom).
3. Kontrola smjera:
Smjer se može promijeniti pomoću ključnih riječi ili stupnjeva.
Primjeri ključnih riječi:
- to right
- to bottom right
Primjeri stupnjeva:
- 90deg
- 180deg
4. Color stops:
Koriste se za kontrolu prostora koji zauzima određena boja.
3. Radijalni gradijent (radial-gradient)
1. Razlika između radijalnog i linearnog gradijenta:
Radijalni gradijent se širi od centra prema van u obliku kruga ili elipse.
2. Oblik:
- circle
- ellipse
Zadani oblik je ellipse.
3. Pozicija:
Centar se može pomaknuti pomoću "at top left".
4. Ponavljajući gradijenti
1. Funkcije za ponavljanje gradijenata:
- repeating-linear-gradient()
- repeating-radial-gradient()