CSS Gradijenti - Kratki pregled

1. Osnove CSS gradijenata

CSS gradijenti predstavljaju prijelaz između dvije ili više različitih boja. Koriste se za pozadine i razne vizualne efekte na web stranicama.

Gradijent se postavlja pomoću svojstva background-image.

Prednosti korištenja gradijenata:

• Nije potrebno koristiti slike pa se stranica brže učitava.
• Boje se mogu jednostavno promijeniti u CSS datoteci.

2. Linear gradient

Osnovni primjer:

background-image: linear-gradient(red, blue);

Zadani smjer je od gore prema dolje.

Smjer možemo promijeniti pomoću to right, to left ili to bottom right.

Mogu se koristiti i stupnjevi kao 90deg ili 180deg.

Primjer s color stop:

background-image: linear-gradient(red 20%, blue);

3. Radial gradient

Radijalni gradijent ide iz centra prema van, dok linearni ide ravno.

Oblici mogu biti circle i ellipse, a zadani je ellipse.

Centar se može pomaknuti npr. at top left.

4. Repeating gradijenti

Funkcije za ponavljanje su:

• repeating-linear-gradient()
• repeating-radial-gradient()

5. Primjeri zadataka

Zadatak A

Zadatak B

Zadatak C