Et CSS -stilark beskriver hvordan websider presenteres, inkludert deres farger, oppsett og skrifter. Det er mange egenskaper som brukes til å lage attraktive websider, for eksempel farge, bakgrunn, bakgrunnsbilde, gradient og mange andre. Mer spesifikt brukes gradienter til å legge til flere farger i bakgrunnen.

I denne artikkelen vil vi diskutere CSS -gradienter. Så la oss starte!

Hva er CSS -gradienter?

I CSS, “gradient”Lar deg jevnt vise overgangen mellom forskjellige farger. Du kan også vise forskjellige farger på en gang for å forbedre utseendet til HTML -elementene. Det er tre typer gradienter som er:

• Lineær gradient
• Radial gradient
• Konisk gradient

Nå skal vi utforske hver av de nevnte gradienttypene en etter en! For dette formålet vil vi først opprette en div i HTML og deretter bruke en "gradient”Til det.

Eksempel

I HTML vil vi lage en container eller en div med klassenavnet “div”Og inne i“”Tag, legg til en overskrift

.

Html

Gradient

Nå vil vi flytte til CSS -filen og bruke "div”For å få tilgang til den opprettede beholderen i HTML og sette høyden på DIV som“200px”. Etter det, sett fargen på overskriften som “RGB (1, 32, 4)”Og skriftstørrelsen som“35px”. Deretter legger du grensen rundt div, bredde som “5px”, Stil som“ridge”, Og farge som“RGB (0, 0, 0)”.

CSS

div
Høyde: 200px;
Farge: RGB (1, 32, 4);
Font-størrelse: 35px;
Grense: 5px Ridge RGB (0, 0, 0);

Ved hjelp av koden over oppnås følgende utgang:

Nå vil vi bruke typene av gradienten i Div.

Hva er CSS lineære gradienter?

For å generere en lineær gradient, “Lineær-gradient ()”Funksjonen til CSS brukes som en verdi av“bakgrunnsbilde”Eller“bakgrunn”Eiendom. Med denne funksjonen kan det opprettes et bilde som er sammensatt av en linjelignende progresjon av forskjellige farger. Det er forskjellige typer lineære gradienter, for eksempel å gjenta lineære gradienter, gradienter fra venstre til høyre og gradienter fra høyre til venstre.

Syntaks

Syntaksen til “Lineær-gradient ()”Funksjon er:

Bakgrunnsbilde: Lineær-gradient (retning, Color-1, Color-2, ...);

Her, "retning”Parameter brukes til å angi retningen på den lineære gradienten som overgangen vil starte slik som til topp, høyre, venstre og bunn. Du kan legge til flere farger i denne funksjonen.

Som en fortsettelse av det forrige eksemplet, vil vi bruke en enkel “Lineær-gradient ()”Funksjon til Div.

Eksempel

Her vil vi bruke “Lineær-gradient ()”Funksjon i“bakgrunnsbilde”Eiendom og legg til retning som“til toppen”; Dette er standardretning for funksjonen. Etter det vil vi legge til tre farger som “RGB (0, 255, 213)”,“RGB (187, 255, 0)”, Og“RGB (51, 255, 0)”For vår gradient:

div
..
Bakgrunnsbilde: Lineær-gradient (til topp, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));

I det undervernede bildet kan du se at en lineær gradient genereres:

Gå nå til neste type der vi vil endre retningen til den lineære gradienten som "til høyre”.

Lineær gradient til høyre

For å generere en lineær gradient til høyre, vil vi endre retning fra “til toppen" til " til høyre”Og sett fem forskjellige farger som“RGB (32, 42, 134)”,“RGB (202, 231, 255)”,“RGB (0, 255, 170)”,“RGB (85, 250, 79)”, Og“RGB (128, 243, 138)”:

div
..
Bakgrunnsbilde: Lineær-gradient (til høyre, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

I utgangen nedenfor kan du se at den lineære gradienten opprettes i riktig retning:

Deretter vil vi endre retningen på den lineære gradienten til “til venstre”.

Lineær gradient til venstre

Her vil vi endre retningen til “til venstre”. Fargene vil bli brukt de samme som i eksemplet ovenfor:

div
..
Bakgrunnsbilde: Lineær-gradient (til venstre, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Du kan se fra utgangen nedenfor at den lineære gradienten til venstre opprettes perfekt:

Du kan også lage en gjentatt overgang av farger. Så la oss gjøre dette!

Gjenta lineære gradienter

For å lage gjentatte lineære gradienter, "Gjentakende lineære gradienter ()”Funksjon brukes. I denne typen lineær gradient gjentas sekvensen av fargen i henhold til den gitte verdien.

Syntaks

Syntaksen til “Gjentakende lineære gradienter ()" er:

Bakgrunnsbilde: Gjentakende-linear-gradient (fargefarge-stopplengde, fargefarge-stopplengde, ...);

I syntaks ovenfor, "Fargestopplengde”Brukes til å sette avstanden mellom første og siste fargestopp som bestemmer lengden på gradienten som gjentar.

La oss fortsette med forrige eksempel.

Eksempel

Her vil vi sette fargen på teksten som “hvit”Og legg til verdien av gradientfarger i“Gjentakende lineære gradienter ()”Funksjoner. Foruten hver farge, vil vi spesifisere “Fargestopplengde" som "0px”,“20px”, Og“40px”. Den brukes til å gjenta fargene etter den gitte lengden:

div
..
Farge: Hvit;
Bakgrunnsbilde: Repeating-Linear-Gradient (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Merk: Uten "Fargestopplengde”Verdi, den lineære gradienten kan ikke settes for repetisjon.

I det undervernede bildet kan du se at den lineære gradienten gjentas:

Hva er CSS radiale gradienter?

En radial gradient er en overgang av farger der overgangen starter fra elementets opprinnelse. For å lage en radiell gradient, “Radial-gradient ()”Funksjon brukes der du kan spesifisere formen på overgangen og fargene.

Syntaks

Syntaksen til “Radial-gradient ()”Funksjon er:

Bakgrunnsbilde: radialgradient (form, startfarge, ..., siste farge);

Du kan stille formen til “Radial-gradient ()”-Funksjon som en“ellipse”Eller“sirkel”.

Eksempel

Her vil vi fortsette det forrige eksemplet og bruke “Radial-gradient ()”Funksjon for å sette formen på overgangen som en“ellipse”. Deretter vil vi legge til fem forskjellige farger som "RGB (17, 0, 255)”,“RGB (0, 174, 255)”,“RGB (109, 250, 255)”,“RGB (0, 190, 79)”, Og“RGB (2, 70, 2)”:

div
..
Bakgrunnsbilde: Radialgradient (Ellipse, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));

Det undervernede bildet indikerer at overgangen til fargen med hell startet fra elementets opprinnelse:

Nå vil vi flytte til den siste typen gradient.

Hva er CSS koniske gradienter?

“Conic-Gradient ()”Funksjon brukes til å lage en konisk gradient. Det er en gradient der overgangene til farger roteres rundt et midtpunkt. For å lage en konisk gradient, må minst to farger defineres.

Syntaks

Syntaksen til “Conic-Gradient ()”Funksjon er:

Bakgrunnsbilde: Conic-Gradient (farge, farge, ... farge);

Du kan angi flere farger i funksjonen til "Conic-Gradient ()”.

La oss flytte til eksemplet der vi vil lage den koniske gradienten.

Eksempel

Vi vil nå sette fargen på overskriften som “hvit”. Deretter, bruk "Conic-Gradient ()”Funksjon og lag en kjeggen av regnbuekonisk ved å legge til regnbuefarger, for eksempel“rød”,“oransje”,“gul”,“grønn”,“blå”,“indigo”, Og“fiolett”:

div
Farge: Hvit;
Bakgrunnsbilde: Conic-Gradient (rød, oransje, gul, grønn, blå, indigo, fiolett);

Her er resultatet som viser at konisk gradient opprettes med suksess:

Det er det! Vi har forklart CSS -gradienten i detalj.

Konklusjon

CSS “gradient”Lar deg vise glatte overganger mellom to eller flere spesifiserte farger. Det er tre typer gradientfunksjoner som brukes som en verdi av “bakgrunn”Eiendom i CSS, for eksempel“Lineær-gradient ()”,“Radial-gradient ()”, Og“Conic-Gradient ()”. I denne håndboken har vi forklart CSS -gradient og dens typer i detalj.