Istraživački rad - CSS Gradijenti

1. Uvod u CSS gradijente

CSS gradijenti su prijelazi između dvije ili više boja. Koriste se za vizualne efekte i pozadine na web stranicama.

Gradijenti se postavljaju pomoću svojstva background-image.

Prednosti CSS gradijenata:

• Ne trebaju slike pa je stranica brža.
• Mogu se lako mijenjati u CSS-u.

2. Linearni gradijent

Najjednostavnija sintaksa:

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

Zadani smjer je od gore prema dolje.

Smjer možemo promijeniti ključnim riječima npr. to right, to bottom right.

Možemo koristiti i stupnjeve npr. 90deg, 180deg.

Primjer color stopova:

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

3. Radijalni gradijent

Radijalni gradijent ide iz centra prema van, dok linearni ide u ravnoj liniji.

Oblici mogu biti circle i ellipse. Zadani je ellipse.

Centar možemo pomaknuti npr. at top left.

4. Ponavljajući gradijenti

Funkcije su:

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

5. Praktični zadaci

Zadatak A

Zadatak B

Zadatak C