Koniske gradienter i CSS

Cascading Style Sheets (CSS) lar deg legge til stil på websidene dine på mange måter ved å gi et humongøst utvalg av egenskaper og metoder. Bortsett fra disse gir CSS også gradienter som tillater visning av en jevn overgang av forskjellige farger.

Det er totalt tre gradienter spesifisert i CSS som er, lineær gradient, radial gradient og konisk gradient. I denne opplæringen vil vi diskutere koniske gradienter og lære å bruke dem.

Hva er en konisk gradient i CSS

I CSS er en konisk gradient en innebygd funksjon som lar deg legge til gradienter som bakgrunnsbilder med fargeoverganger rundt et midtpunkt.

Syntaks

Bakgrunnsbilde: Conic-Gradient (Color Degree, Color Degree, ...);

Du må spesifisere minst to farger for å få conic-gradient () til å fungere, dessuten, hvis du ikke spesifiserer fargenes grad, vil fargene spre seg jevnt rundt midtpunktet.

La oss utforske noen eksempler.

Eksempel 1

Eksemplet nedenfor demonstrerer arbeidet med conic-gradient () ved å bruke tre farger.

Html

Her lager vi ganske enkelt en div container for å illustrere arbeidet med koniske gradienter.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Bakgrunnsbilde: Conic-Gradient (rød, grønn, blå);

Høyden og bredden på Div er satt til 180px, og vi tildeler tre grunnleggende farger til Conic-Gradient () -funksjonen. Siden ingen grad av fargene er spesifisert, vil disse fargene derfor spre seg jevnt over midtpunktet i DIV -beholderen.

Produksjon

En konisk gradient med tre farger.

Eksempel 2

Eksemplet nedenfor demonstrerer arbeidet med conic-gradient () ved hjelp av fire farger.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Bakgrunnsbilde: Conic-Gradient (rosa, lilla, grønn, gul);

Her har vi tildelt fire farger til Conic-Gradient () -funksjonen.

Produksjon

En konisk gradient med fire farger.

Nå som vi har en god forståelse av konseptet, la oss utforske hvordan vi kan legge til grader til konisk gradienter i CSS ved hjelp av noen eksempler.

Eksempel 3: Hvordan legge til grader til conic -gradienten

Eksemplet nedenfor viser hvordan du kan spesifisere grader sammen med fargene på den koniske gradienten.

CSS

.div
Bakgrunnsbilde: Conic-Gradient (Pink 45Deg, Purple 90deg, Yellow 230deg);

I koden ovenfor spesifiserer vi tre farger sammen med graden for hver farge.

Produksjon

En konisk gradient med spesifiserte fargegrader.

Eksempel 4: Hvordan lage kakediagrammer ved hjelp av koniske gradienter

For å lage et kakediagram, sett først grensradiusen til DIV -beholderen til 50% sammen med en viss høyde og bredde.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Border-Radius: 50%;
Bakgrunnsbilde: Conic-Gradient (rød, grønn, blå);

Grensen-radius av Div-elementet er satt til 50%.

Produksjon

En avrundet kakediagramlignende form er blitt generert med hell.

Nå kan du opprette et kakediagram ved å spesifisere rekke fargegrader i conic-gradient () -funksjonen som vist i CSS-kodebiten nedenfor:

CSS

.div
Høyde: 180px;
Bredde: 180px;
Border-Radius: 50%;
Bakgrunnsbilde: Conic-Gradient (Red 0Deg, Red 90Deg,
grønn 90deg, grønn 180deg,
blå 180deg, blå 270deg,
gul 270deg, gul 360deg);

I koden ovenfor har vi spesifisert fire farger som er røde, grønne, blå og gule. Nå for hver farge har en horisontal og vertikal grad blitt spesifisert og dekker hele 360 ​​grader av en sirkel.

Produksjon

En kakediagram med bestemte fargegrader.

Eksempel 5: Hvordan legge til en konisk gradient fra en spesifikk vinkel

For å legge til koniske gradienter fra en bestemt vinkel, må du spesifisere den vinkelen i conic-gradient () -funksjonen. Slik gjør du det.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Border-Radius: 50%;
Bakgrunnsbilde: Conic-Gradient (fra 270deg, rød, grønn, blå);

Her har vi spesifisert at fargene røde, grønne og blå skal spres jevnt fra en vinkel på 270 grader.

Produksjon

En konisk gradientpittakart fra en spesifisert vinkel er lagt til vellykket.

Eksempel 6: Hvordan legge til en konisk gradient fra en spesifikk stilling

Siden vi vet at farger i en konisk gradient spredte seg jevnt over et midtpunkt, definerer vi derfor at vi faktisk definerer midtpunktet til den koniske gradienten. Tenk på eksemplet for å lære hvordan du gjør det.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Border-Radius: 50%;
Bakgrunnsbilde: Conic-gradient (ved 30% 45%, rød, grønn, blå);

I koden ovenfor har vi definert plasseringen av midtpunktet på 30% 45%.

Produksjon

En konisk gradient fra en spesifisert posisjon legges til.

Eksempel 7: Hvordan gjenta en konisk gradient

For å gjenta en konisk gradient, bruk den repeterende-konisk-gradient () -funksjonen. Tenk på eksemplet nedenfor.

CSS

.div
Høyde: 180px;
Bredde: 180px;
Border-Radius: 50%;
Bakgrunnsbilde: Repeating-Conic-gradient (rosa 10deg, rosa 20deg, gul 20deg, gult 30deg);

Her bruker vi den repeterende-konisk-gradient () -funksjonen og bruker to farger sammen med å spesifisere grader.

Produksjon

En gjentatt konisk gradient ble satt inn

Konklusjon

En konisk gradient i CSS er en innebygd funksjon som lar deg legge til gradienter med fargeoverganger rundt et midtpunkt. Du må spesifisere minst to farger for å lage en konisk gradient. Det er mange morsomme ting du kan gjøre med en konisk gradient som spesifiser fargegrad, vinkler eller en posisjon. Dessuten kan du også lage kakeskart ved å bruke de koniske gradientene. I denne oppskrivningen diskuterte vi koniske gradienter sammen med mange eksempler.