CSS bakgrunnsgradient | Forklart

En gradientfarge er en som er sammensatt av to eller flere nyanser. I nettutvikling bruker designere forskjellige farger i applikasjoner for å gjøre dem visuelt tiltalende. Mer spesifikt er CSS -gradienter en unik klasse av bilde som gir en gradvis endring mellom komplementære farger. Disse gradientene er av tre hovedtyper: lineær, radial og konisk. Du kan bruke dem til å legge til gradientfarger til elementene.

Denne opplæringen vil gi en detaljert guide om hva CSS -gradienter er.

Hva er typene CSS -gradienter?

Typene CSS -gradientfunksjoner er listet opp nedenfor:

• Lineær-gradient ()
• Conic-Gradient ()
• Radial-gradient ()
• gjenta-linear-gradient ()
• Gjenta-konisk gradient ()
• Gjenta-radial-gradient ()

Hver eiendom vil bli diskutert i detalj med praktiske demonstrasjoner.

Metode 1: Hvordan legge til lineær gradient i CSS?

I CSS opprettes en lineær gradient med "Lineær-gradient ()”Funksjon. For å bruke det, sjekk ut neste eksempel.

Eksempel 1: Legge til enkel lineær gradient i CSS

I HTML, inne i kroppselementet, legg til en div med flere klasser “Rektangel enkel gradient”. Vi vil lage en boks med DIV -klasseinnhold som vi vil bruke forskjellige gradientegenskaper.

Html

De to klassene som er nevnt i HTML -koden, brukes med stiler ved bruk av CSS.

Stil “rektangel” div

.rektangel
Bredde: 90%;
Høyde: 200px;
Margin: Auto;

Her:

“bredde”Og“høydeEiendom er bestemmer elementets størrelse vertikalt så vel som horisontalt. “margin”Eiendom genererer lik plass rundt elementet.

Stil “enkel gradient” div

.enkel gradient
Bakgrunn: Lineær-gradient (blå, svart);

Den enkle gradientdiven får eiendommen “bakgrunn”Med verdien”Lineær-gradient ()”Funksjon. Denne funksjonen er utstyrt med to farger, blå og svart, som parametere.

Lagre filen og åpne den i nettleseren. Utgangen vises som vist nedenfor:

Eksempel 2: Legge til lineær gradient ved bruk av vinkler i CSS

For å kontrollere retningen på fargene, kan vinkler også spesifiseres som følger:

.vinkelgradient
Bakgrunn: Lineær-gradient (40deg, gul, rød);

Produksjon

Eksempel 3: Legge til lineær gradient ved bruk av mer enn to farger i CSS

Det er ikke begrenset til bare å bruke to farger. Som designer kan du bruke så mange farger som du vil. Som standard er fargene jevnt fordelt. For eksempel:

Bakgrunn: Lineær-gradient ( #181818, #8758ff, #EAF290, #5CB8E4, #F2F2F2, #182747);

Produksjon

Eksempel 4: Legge til lineær gradient ved å spesifisere fargestopp i prosenter i CSS

Her starter fargene som er spesifisert med prosentene med den spesifiserte verdien:

Bakgrunn: Lineær-gradient (til venstre, #00F5FF 20PX, #FCE700 40%, #FF6D28 60%, #EA047E 2PX);

Produksjon

Eksempel 5: Legge til lineær gradient for harde linjer i CSS

For å lage en hard linje mellom fargene, brukes de to eller flere fargestoppene på samme sted. I den lineære graden () -funksjonen først, spesifiser retningen, og farger deretter med prosent:

Bakgrunn: Lineær-gradient (til topps til høyre, #00ABB3 45%, #3C4048 45%);

Ved å gi samme sted til fargene, får vi resultatet som vist i bildet nedenfor:

Eksempel 6: Legge til lineær gradient ved bruk av fargestiping i CSS

Gradienten overgår jevnt fra farge til farge. Du kan spesifisere fargen hint for å bevege midtpunktet for overgangen. Prosentandelen er satt til “50%”Slik at gradienten vil overføre fargen fra blått til rødt:

Bakgrunn: Lineær-gradient (blå, 50%, rød);

Produksjon

Metode 2: Hvordan legge til konisk gradient i CSS?

En konisk gradient spesifiserer fargeoverganger rotert rundt et senter. Det er designet ved å bruke “Conic-Gradient ()”Funksjon. For å bruke den, må minst to farger defineres. Dessuten er vinkelen som standard "0”Deg og stillingen er satt som“senter”.

Syntaks

Bakgrunnsbilde: Conic-Gradient ([fra vinkel] [på posisjon,] farge [grad], farge [grad], ...);

Conic-Gradient () -funksjonen får tre farger som parametere:

Bakgrunnsbilde: Conic-Gradient ( #FF5858, #E0144C, #9A1663);

Produksjon

Eksempel 1: Legge til konisk kakediagram i CSS

Conic-Gradient () -funksjonen gir oss anlegget til å lage kakediagrammer. For dette kreves det å spesifisere farger med start- og sluttvinkler. Mer spesifikt, for å lage distinkte fargesektorer, må startvinkelverdien til neste farge være lik eller mindre enn sluttvinkelverdien til den første fargen.

Bakgrunn: Conic-Gradient (Blue 50deg, Red 50deg 120deg, Orange 120deg);

Produksjon

Eksempel 2: Legge til konisk gradient ved bruk av vinkler i CSS

Konisk gradient er sirkulær og sentrum av elementet fungerer som kildepunktet for fargestopp. Det er 0 grader til 360 grader i konisk gradientvinkel:

Bakgrunnsbilde: Conic-Gradient (fra 70deg, #F1D4D4, #6A097D);

Det kan sees at fargen roterte fra 70deg:

Metode 3: Hvordan legge til radiell gradient i CSS?

En radiell gradient kan opprettes med "Radial-gradient ()”Funksjon. Denne funksjonen produserer et bilde som består av en gradvis overgang mellom flere farger som brukes til å stråle fra midtpunktet. Det kan være en ellipse eller en sirkel.

Nedenfor koden viser "bakgrunn”Eiendom med verdien som en radialgradientfunksjon:

Bakgrunn: Radial-gradient (sirkel, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Produksjon

Eksempel: Legg til ikke-sentrert radial i CSS

Eksemplet nedenfor viser hvordan du lager en ikke-sentrert radial gradient.

Bakgrunnsbilde: radialgradient (Farest-Corner på 60px 90px,
#FF9F30 0%,
#B60C3C 100%);

Produksjon

Metode 4: Hvordan legge til gjentatte lineære gradienter i CSS?

Funksjonen "gjenta-linear-gradient ()”Designet et bilde langs gjentatte lineære gradienter. Det tar parametrene som farger, grader eller prosenter.

Bakgrunn: Repeating-Linear-Gradient (25DEG, #00A8CC, #142850 23.3%);

Produksjon

Metode 5: Hvordan legge til gjentatte radielle gradienter i CSS?

“Gjenta-radial-gradient ()”Funksjon genererer et bilde som består av repeterende gradienter som stråler fra sentrum.

Bakgrunn: Gjenta-radial-gradient ( #313131, #CA3E47 30%);

Produksjon

Metode 6: Hvordan legge til gjentatte kjegle gradienter i CSS?

“Gjenta-konisk gradient ()”Funksjon produserer et bilde som består av en gjentatt gradient. Disse fargeovergangene roterer rundt et midtpunkt.

Her er et eksempel for å demonstrere gjenta konisk gradient:

Bakgrunn: Gjenta-konisk-gradient (fra 74deg på 86% 50%,
#A21232 0DEG 15DEG,
#1A1831 10DEG 21DEG,
#Dece9c 20deg 31deg);

Produksjon

På denne måten brukes CSS -bakgrunnsgradienter i CSS.

Konklusjon

HTML gir mange metoder for å gjøre dokumenter tiltalende og attraktive. Disse metodene inkluderer farger, tekstformatering, gradienter og mer. CSS -gradientene er de spesielle bildene som viser fargeoverganger mellom to eller flere farger. Bakgrunnselementet bruker stort sett gradientfunksjoner. Dette innlegget vil gi en guide til CSS -bakgrunnsgradienten.