Det observeres fra syntaksen at funksjonen lineær grad () avhenger av retningsparameteren og fargene som brukes.

Retningsparameteren definerer utgangspunktet og aksepterer følgende verdier:

• “Til topp” eller “0Deg”: starter fra bunnen mot toppen
• “Til høyre” eller “90deg”: Gradient starter fra venstre mot høyre side
• “Til bunn” eller “180deg”: fra topp til bunn
• “Til venstre” eller “270deg”: starter fra høyre side mot venstre side

Ovennevnte parametere har ekvivalens med vinklene. Som at du også kan definere start av gradienten ved hjelp av vinkler. Ekvivalensen av vinkler og sider beskrives som: “til topp” = ”0Deg”, “til høyre” = ”90deg”, “til bunn” = ”180deg”, og “til venstre” = ”270deg”.

Eksempel 1: Lineær gradient med standardparametere

For å øve lineær-gradienten på et grunnleggende nivå, har vi brukt følgende kode.

Html

Lineær gradient

CSS

I koden ovenfor er retningsparameteren til den lineære gradientfunksjonen satt til standardverdien. Der gradienten ville starte fra den grønne fargen og vil gå over mot den røde fargen.

Produksjon

Fra utgangen observeres det at standardretning for den lineære gradientfunksjonen er fra topp til bunn.

Eksempel 2: En tilpasset lineær gradient

Dette eksemplet demonstrerer opprettelsen av en gradient med tilpassede retningsverdier og fargevinkler.

Html

Lineær gradient

CSS

Ovennevnte CSS -kode er beskrevet som,

• til høyre: viser gradientens retning fra venstre mot høyre
• Grønn 10%: viser at overgangseffekten vil starte fra 10% av hele gradientens lengde
• rød 50%: Dette viser at overgangseffekten vil gå opp til 50% av gradientens lengde

Produksjon

Utgangen viser at den faste grønne fortsetter opp til 10% lengde. Overgangen starter fra 10% og fortsetter til 50% av lengden. Etter 50% starter den faste røde fargen som vil ende med lengden på gradienten.

Eksempel 3: En repeterende lineær gradient

REPEATING-LINEAR-GRADIENT () -funksjonen kan brukes til å lage en repeterende gradient.

Html

En gjentatt lineær gradient

CSS

Ovennevnte CSS -kode er beskrevet som,

• Retningen vil være fra venstre til høyre da vinkelen er 90deg
• Gradienten ville starte fra rødt etterfulgt av grønt og lett havgrønn. Disse fargene vil bli gjentatt til lengden på gradienten slutter

Merk: Du må definere prosentandelen med minst den siste fargen. Ellers vil ikke mønsteret gjenta.

Produksjon

Ovennevnte utgang viser at gradienten med røde, grønne og lys og fargene blir gjentatt flere ganger til hele lengden på gradienten.

Konklusjon

En lineær gradient i CSS kan opprettes ved å bruke den lineære gradienten () -funksjonen til CSS. Denne funksjonen godtar flere parametere som definerer retningen til gradienten og fargen som brukes. Denne artikkelen gir en beskrivende guide om lineære gradienter i CSS. Ved å følge dette innlegget, vil du kunne få det grunnleggende konseptet med lineære gradienter i CSS med eksempler som viser opprettelsen av lineære gradienter i CSS. Dessuten kan en repeterende lineær-grad () -funksjon utøves for å lage en repeterende gradient.