Lineære gradienter i CSS forklarte
En effekt som skaper en jevn overgang fra en farge til en annen blir referert til som en gradient. CSS hjelper til med å lage forskjellige typer gradienter som lineær, radial og conic. De lineære gradientene har overgangseffekter i en enkelt retning, mens radialen og koniske har ikke-lineære transzonale effekter. Denne artikkelen gir en beskrivende guide om lineære gradienter med følgende læringsutbytte:
- Hvordan lage lineære gradienter i CSS
- Bruk av lineær-gradient () -funksjonen i CSS
Hvordan lage lineære gradienter i CSS
De lineære gradientene kan opprettes ved å bruke syntaksen nedenfor.
Bakgrunnsbilde: lineær gradient (retning, color1Det 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.