CSS Lineær gradient forklaret med eksempler

I en lineær gradient flyder farverne i en enkelt retning, for eksempel fra venstre til højre, top til bund eller en hvilken som helst vinkel, du vælger.

Syntaks

For at oprette en lineær gradient skal du definere mindst to farve stop. Det er de farver, som overgange er skabt blandt. Det erklæres enten på baggrunds- eller baggrundsbilledegenskaberne .

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

Hvis der ikke er angivet nogen retning, er standardovergangen top til bund.

Eksempler

Top til tå:

background: linear-gradient(red, yellow);

Venstre Til r ight:

For at gøre det fra venstre mod højre, du tilføje en ekstra parameter i begyndelsen af det linear-gradient()startende med ordet til hvilket angiver retningen:

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

Diagonale gradienter :

Du kan også overføre en gradient diagonalt ved at angive de vandrette og lodrette startpositioner, for eksempel øverst til venstre eller nederst til højre.

Her er en prøve for en gradient, der starter øverst til venstre:

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

Brug vinkler til at specificere retningen for forløbet

Du kan også bruge vinkler for at være mere præcise til at specificere retningen for gradienten:

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

Vinklen er angivet som en vinkel mellem en vandret linje og gradientlinjen.

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

Brug af mere end to farver

Du er ikke begrænset til kun to farver - du kan bruge så mange kommaadskilte farver, som du vil.

background: linear-gradient(red, yellow, green); 

Du kan også bruge andre farvesyntakser som RGB eller hex-koder til at specificere farverne.

Hård farve stopper

Du kan ikke kun bruge gradienter til at skifte med falmende farver, men du kan også bruge det til at skifte fra en solid farve til en anden solid farve med det samme:

background: linear-gradient(to right,red 15%, yellow 15%);

Mere information:

• CSS-håndbogen: en praktisk guide til CSS for udviklere