Stil nettstedelementer med CSS-bakgrunnsgradient

Hvis du har vært på internett i mer enn noen minutter, er sjansen stor for at du har kommet over en CSS-gradient. CSS-bakgrunnsegenskapen kan brukes til å lage en rekke forskjellige stiler, og en av de mest spennende typene er hva den kan gjøre med gradientverdien.

Å vite hvordan man designer og lager forskjellige CSS-graderinger er en ressurs for enhver programvaredesigner eller utvikler. Fra denne artikkelen lærer du alt du trenger å vite for å begynne å inkludere CSS-graderinger i prosjektene dine.

Hva er en CSS-gradient?

En CSS-gradient er egentlig kombinasjonen av to eller flere farger som glatt overgår fra den ene til den neste. Overgangstilstanden til en CSS-gradient er avhengig av hvilken gradient som brukes. Det er to hovedtyper av graderinger som ofte brukes i programvaredesign: lineær og radial.

Imidlertid er det en tredje gradienttype som er mindre populær og kjent som konisk gradient.

Syntaks for CSS-gradienter

Bakgrunnsbilde: gradienttype (retning, farge1, farge2);

CSS-gradienten skal tilordnes CSS-egenskapen i bakgrunnsbildet. Gradienttypen kan være en av flere; lineær gradient, radialgradient eller konisk gradient. Gradienttypen blir fulgt av å åpne og lukke parenteser som inneholder overgangsretningen til gradienten, samt fargene som skal inkluderes i gradienten.

I slekt: Hvordan sette et bakgrunnsbilde i CSS

Eksemplet ovenfor viser to farger, men en gradient kan inneholde flere forskjellige farger. Det eneste kravet er at hver farge i listen er atskilt med komma.

Hva er en lineær gradient?

Den lineære gradienten er den mest populære CSS-gradienten. Det skaper en horisontal, vertikal eller diagonal overgangsgradient med to eller flere farger.

CSS Lineær gradienteksempel

Bakgrunnsbilde: lineær gradient (# 00A4CCFF, # F95700FF);

Koden ovenfor vil gi følgende CSS-gradient:

Det er en hovedkomponent av gradientsyntaks utelatt fra eksemplet ovenfor. Denne komponenten er overgangsretningen for gradienten, og den ble utelatt fordi standardjusteringen av den lineære gradienten er vertikal (topp til bunn); det er ønsket utdata i dette eksemplet.

Koden ovenfor gir samme resultat som den følgende kodelinjen. Den eneste forskjellen mellom de to er retningsdelen av koden.

Ved hjelp av det nederste lineære gradienteksemplet

Bakgrunnsbilde: lineær gradient (til bunn, # 00A4CCFF, # F95700FF);

Som du kan se fra utdataene, skaper koden ovenfor en gradient som begynner med blått på toppen og deretter sakte overgår til den oransje nederst. Hvis du ønsket å snu rekkefølgen på fargene, kan du bare bytte ut til bunn med til toppen og dette vil reversere retningen på gradienten og gi følgende utdata:

I likhet med den vertikale justeringen kan den horisontale justeringen av en gradient oppnås ved bruk av to sett med retningsord: til venstre og til høyre, som vil produsere henholdsvis følgende utganger.

Diagonal lineær gradient

Det er mulig å oppnå en diagonal lineær gradientovergang i hvilken som helst retning av en lineær gradient. Det er bare fire spesifikke lister med nøkkelord som du trenger å vite for å gjøre dette mulig.

• Nederst til høyre
• Nederst til venstre
• Øverst til høyre
• Øverst til venstre

Ved hjelp av det diagonale lineære gradienteksemplet

Bakgrunnsbilde: lineær gradient (nederst til høyre, # 00A4CCFF, # F95700FF);

Eksemplet ovenfor gir følgende utdata:

Som du kan se fra utdataene ovenfor, gjør den lineære gradienten overgangen i en diagonal retning som beveger seg fra øverst til venstre til nedre høyre del av gradienten.

Flerfarget lineær gradient

En lineær gradient kan ha to eller flere farger, men hvordan ser flere farger ut i en gradient? Et flerfarget lineært gradientfargevalg er avhengig av retning. De som overgår i horisontal retning, vil ha hver nye farge til venstre eller høyre for den lineære gradienten, avhengig av den nøyaktige retningen til den lineære gradienten.

Flerfarget lineært gradienteksempel

Bakgrunnsbilde: lineær gradient (til høyre, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Kodelinjen ovenfor vil gi følgende utdata:

Som du kan se, blir hver nye farge lagt til til høyre for stigningen, og skaper det som til slutt forvandles til en regnbue. Den samme effekten kan oppnås i vertikal retning; Imidlertid vil det spesifikke fargevalget på den lineære gradienten avhenge av søkeordet i vertikal retning (til topp eller bunn).

Hva er en radial gradient?

Radialgradienten skaper en spiralgradient på to er flere farger som starter fra midten som standard. Der den lineære gradienten gir en rett gradient som flyter vertikalt eller horisontalt, produserer den radiale gradienten en sirkulær gradient som flyter fra sentrum til ytterkantene.

Ved hjelp av Radial Gradient Eksempel

Bakgrunnsbilde: radialgradient (sirkel, # 00A4CCFF, # F95700FF);

Kodelinjen ovenfor vil gi følgende utdata:

Endre Radial Gradient Center

Som standard starter en radiell gradient i midten av gradienten. det er imidlertid mulig å endre utgangspunktet ved å introdusere noen få nøkkelord.

Endring av eksempel på radial gradientens startposisjon

Bakgrunnsbilde: radialgradient (sirkel øverst til høyre, # 00A4CCFF, # F95700FF);

Kodelinjen ovenfor vil gi følgende utdata:

Som du kan se fra utgangen over begynner gradienten nå fra øvre høyre hjørne i stedet for sentrum. Denne endringen er mulig på grunn av inkluderingen av nøkkelordet øverst til høyre i koden ovenfor. Følgende liste over nøkkelord kan også brukes til å endre utgangspunktet for den radiale gradienten:

• Øverst til venstre
• Nede til høyre
• Nede til venstre

Flerfarget Radial Gradients

Som den lineære gradienten, kan radialgradienten også bruke to er flere farger, den største forskjellen er at der den lineære gradienten legger til gradienten i en rett linje, legger radialgradienten til nye farger på den ytre kant.

Flerfarget radial gradienteksempel

Bakgrunnsbilde: radialgradient (sirkel, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Kodelinjen ovenfor vil gi følgende utdata:

Tilpasse graderinger

Så langt har du sett hvordan du endrer retning og midtpunkt for en gradient, men du har ikke sett hvordan du kan tilpasse en gradient. Å tilpasse en gradient kan høres ut som mye arbeid, men når du først forstår det grunnleggende om å lage en CSS bakgrunnsgradient det neste åpenbare trinnet er å lære hvordan du kan gjøre CSS-gradientene dine mer unik.

Som standard opptar fargene i en gradient en jevnt fordelt plass med hver farge som overgår jevnt til den etter den. Så hvis to farger kombineres for å danne en gradering, vil hver farge oppta halvparten av ledig plass mens den overgår fra den ene til den andre. Hvis tre farger kombineres, vil hver farge oppta en tredjedel av plassen som er tilgjengelig.

Med en tilpasset gradering får du definere hvor mye plass en farge vil oppta i en gradient ved å eksplisitt tildele fargestoppposisjon.

Tilpasse et lineært gradienteksempel 1

Bakgrunnsbilde: lineær gradient (til høyre, # 00A4CCFF, # F95700FF 30%);

Kodelinjen ovenfor vil gi følgende utdata:

Utgangen ovenfor viser den andre fargen i den lineære gradienten som stopper ved 30% -punktet for den første fargen i gradienten, i stedet for sin vanlige posisjon, og fordi den andre fargen også er den endelige fargen i gradienten, strekker den seg naturlig til slutt.

Hvis du skulle plassere 30% i koden ovenfor på slutten av den første fargen, burde ting bli tydeligere.

Tilpasse et lineært gradienteksempel 2

Bakgrunnsbilde: lineær gradient (til høyre, # 00A4CCFF 30%, # F95700FF);

Koden ovenfor vil gi følgende utdata.

Utgangen ovenfor viser tydelig den første fargen i gradienten som stopper ved 30% -punktet til den andre fargen i gradienten. Dette eksemplet sammen med det ovenfor bør bidra til å gjøre fargestopptilpasning lettere for deg å forstå.

Tilpassing av en radiell gradient gjøres på samme måte som en lineær gradient. Det eneste du trenger å gjøre for å oppnå de samme resultatene ovenfor i en radiell gradient er å endre gradienttype og retning.

Opprett CSS-gradienter har aldri vært enklere

Denne opplæringsartikkelen gir deg verktøyene for å identifisere og lage lineære og radiale gradienter. Hvis du har kommet til dette punktet, lærte du hvordan du endrer retning og sentrum av en gradient. I tillegg har du nå ferdighetene til å tilpasse CSS-graderinger og lage unike bakgrunnsgradienter.

Men hvis du ikke vil gå rett inn i å lage nye og unike graderinger, kan du begynne med å lage noen flotte, eksisterende eksisterende.

27 Stilige CSS-bakgrunnsgradienteksempler

Solide farger er så i fjor. Graderinger er inne! Men hvordan lager du dem i CSS?

Les Neste

Om forfatteren

Utvid til Les hele historien