Radiale gradienter viser overgangseffekten av farger i en elliptisk eller sirkulær form. En radial gradient starter fra et enkelt punkt som vanligvis er sentrum av sirkelen eller ellipsen, og deretter spres en jevn effekt av overgangen rundt det midtpunktet.

En radial gradient kan opprettes ved å bruke radial-gradient () -funksjonen i CSS. Imidlertid lar CSS deg lage en gjentatt radial gradient ved hjelp av den gjentatte radial-gradient () -funksjonen. Denne artikkelen gir en beskrivende guide for radiale gradienter og demonstrerer et sett med eksempler som viser opprettelsen av radiale gradienter i forskjellige scenarier.

Hvordan lage radielle gradienter i CSS

For å lage en radial gradient, må du følge syntaksen nedenfor.

Bakgrunnsbilde: Radialgradient (formstørrelse på posisjon, color1, color2, ...)

I syntaks ovenfor,

De formparameter betegner formen på gradienten og aksepterer Enten sirkel eller ellipse (standard). De posisjonsparameter definerer gradientens plassering. Standardverdien for posisjonsparameteren er senter. Color1, Color2 representerer fargene som brukes til gradient og med farger, kan du spesifisere stoppprosenten for hver farge, e.g., rød 10%.

Til slutt størrelse parameter beskriver størrelsen på gradientavslutningsform og verdien kan være ett av følgende:

• nærmest side: til størrelse en gradient slik at den oppfyller den nærmeste siden til sentrum
• Nærmest hjørne: Gradienten møter det nærmeste hjørnet
• Farest side: Gradienten møter på lengst side
• Farest-Corn (standardverdi): Gradienten er dimensjonert på en måte som den møter det fjerneste hjørnet

La oss øve dem for å lage en radiell gradient med flere egenskaper.

Eksempel 1: Radial gradient med standardparametere

I dette eksemplet opprettes en radial gradient med standardparameters verdier.

Html

Radial gradient

CSS

Det kan observeres fra ovennevnte kode at bare gradientfargene er definert. Kriterier for form, plassering og fargestopp er ikke definert her.

Produksjon

Fra utgangen observeres det at gradienten stammer fra sentrum (da det er standardposisjonen) og sprer seg i en ellipse (standardverdi).

Eksempel 2: Tilpasset radial gradient

Dette eksemplet viser opprettelsen av en radial gradient med et tilpasset sett med parameters verdier.

Html

Radial gradient

CSS

div
Høyde: 200px;
Bakgrunnsbilde: radialgradient (sirkel nærmest side ved 20%, rød, grønn, oransje);

Ovennevnte CSS -kode oppretter en radial gradient som inneholder følgende egenskaper:

• formstilen er satt til sirkel
• Gradientavslutningsform er definert av nærmest side
• Startposisjonen til gradienten er satt til 20% (som standard er den justert som sentrum)

Produksjon

Utgangen viser at gradienten stammer fra posisjonen satt til 20% (av den totale lengden på gradienten). Dessuten ender gradientformen på nærmeste side fra sentrum, og dermed sprer den siste fargen (oransje) seg rundt hele formen når gradienten ender.

Eksempel 3: Gjenta radiell gradient

Den gjentatte radial-gradient () -funksjonen gjør det mulig å ha en gjentatt effekt av radialgradienten. Følgende kode praktiseres for å få repeterende lineær-gradient () -effekt.

Html

Radial gradient

CSS

I ovennevnte CSS-kode oppretter en repeterende radial-gradient () -funksjon en gradient som har en sirkulær overgangseffekt med grønn farge som stopper med 5% og oransje farge stopper med 10%.

Produksjon

Fra output blir den radiale gradienten gjentatt med hver repetisjon som inneholder de samme egenskapene.

Konklusjon

En radial gradient i CSS skaper overgangseffekter i form av en sirkel eller ellipse. Radial-gradient () -funksjonen i CSS lar deg lage en radial gradient med forskjellige egenskaper. Radialgradienten stammer fra et punkt og kan utvides i en sirkel eller ellipseform. Bortsett fra dette, lar den repeterende radial-gradient () -funksjonen deg legge til repeterende gradientlinjer. I denne guiden har vi praktisert et sett med eksempler som demonstrerer bruken av radialgradient () og gjentagende radial-gradient () for å lage en radial gradient med forskjellige egenskaper.