Gradienter i CSS forklarte
En gradient refererer til et bilde med overgangseffekter, og en gradient kan brukes hvor som helst som bilder. Gradientene opprettes ved hjelp av CSS, og det tilbyr å lage gradienter med omfattende egenskaper. For eksempel kan en gradient være enten lineær, radiell eller konisk. Hver gradienttype hjelper av den respektive funksjonen.
I denne artikkelen har vi gitt et innblikk i gradientene i CSS, og følgende læringsresultater forventes.
- Typer gradienter i CSS
- Lineær-gradient () -funksjon
- Radial-Gradient () -funksjon
- Conic-Gradient () -funksjon
Typer av gradienten i CSS
Gradienten kan deles inn i tre kategorier, lineær, radial og konisk. De kommende seksjonene vil presentere det grunnleggende for hver type gradient og hvordan de brukes i CSS.
Lineær gradient
Den lineære gradienten kan brukes for å få overgangseffekten i en lineær dimensjon (en retning på en gang).
Hvordan du bruker lineær-gradient () funksjon
Funksjonen Linear-Gradient () lar deg lage en lineær gradient med forskjellige effekter.
Bakgrunnsbilde: Lineær-gradient (retning, color1, color2, ...);De retning av den lineære gradienten kan godta følgende verdier
til høyre: Brukes til å vise gradienten fra venstre mot høyre retning
til venstre: for å vise gradienten fra høyre til venstre
til bunn (som standard): mot bunnen
til toppen: viser gradienteffekten fra bunn til topp
Videre kan den lineære gradienteffekten også brukes diagonalt ved å bruke følgende verdier av retning parameter.
til nede til høyre: Gradienten starter fra øverst til venstre og lener seg nederst til høyre
til nede til venstre: Gradienten starter fra øverste høyre hjørne nederst til venstre
til topp til høyre: starter fra nedre venstre hjørne mot øverst til høyre
Til øverst til venstre: fra nederste høyre til øverst til venstre
Eksempel
Følgende kode praktiserer bruken av lineær gradient på et HTML-element.
Html
Lineær gradient
Ovennevnte kode oppretter en og en
element inne i den diven.
CSS
Ovennevnte kode bruker en lineær gradient med følgende verdier
- Retningen er satt til “venstre til høyre“
- verdien av Color1 og Color2 er satt til lilla og Lightseagreen henholdsvis
Produksjon
Ettersom gradientens retning var fra venstre mot høyre, derfor lilla Farge starter fra venstre mens LightSeagreenColor starter fra høyre.
Radial gradient
Som navnet viser, genereres den radiale gradienten fra midtpunktet for bildet. Overgangseffekten kan genereres i form av en sirkel eller en formørkelse.
Hvordan du bruker radial-gradient () -funksjonen
En radiell gradient kan opprettes ved å følge syntaksen nedenfor.
Bakgrunnsbilde: Radial-gradient (formstørrelse på posisjon, color1, color2 ...);I syntaks ovenfor,
- de form (standard er en ellipse) kan være en ellipse eller sirkel
- de størrelse (Standard er lengst hjørnet) kan godta lengst-hjørne/fjerneste side, nærmest side/nærmeste hjørne.
- de gradient vil starte fra farge1 (i sentrum enten i en formørkelsesform eller sirkelform) etterfulgt av Color2 og så videre.
Eksempel
Koden skrevet nedenfor viser opprettelsen av radialgradienten.
Html
Radial gradient
CSS
Ovennevnte CSS skaper en radial gradiennt med color1 = ”grønn”, color2 = ”gul” og color3 = ”rød”.
Produksjon
Det observeres fra utgangen at gradienten har startet med grønn farge, omgitt av gul, og den røde er på slutten.
Konisk gradient
Konisk gradient brukes til å lage en gradient på en slik måte at hver farge starter fra og roterte rundt midten. De er like radial gradient, men fargene stoppes i kanten av formen, mens fargen i radialgradient stopper
Hvordan bruke konisk gradient
Konisk-gradienten kan opprettes ved å følge syntaksen nedenfor:
Bakgrunnsbilde: Conic-Gradient (fra vinkel i posisjon, farge1Ovennevnte syntaks er beskrevet nedenfor,
- “fra vinkel”Definerer rotasjonen av gradienten med urviseren og“på posisjon”Definerer starten på den koniske gradienten.
- de farge Definerer fargen og stopptilstanden for den fargen.
- de “Fra vinkel”, “på posisjon”, og er valgfrie parametere
Eksempel
Følgende eksempel viser hvordan en konisk-gradient kan opprettes
Html
Konisk gradient
CSS
I koden ovenfor brukes den conic-gradient () -funksjonen som oppretter en gradient som har grønn, gul og rød.
Produksjon
Ettersom standardverdiene for vinkelparametere brukes, har gradienten dermed startet fra sentrum med rotasjonsvinkelen på 0Degree.
Konklusjon
En gradient er et bilde med overgangs- eller solide effekter, og det opprettes ved hjelp av CSS. En gradient kan opprettes med forskjellige funksjonalitet. Denne artikkelen demonstrerer arbeid og bruk av gradienten i CSS. Den lineære gradienten skaper en gradienteffekt i en enkelt retning, mens radialen og koniske kan brukes for rotative effekter.