Home-theater-designers
Hvis du har vært på internett i mer enn noen få 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 du designer og lager forskjellige CSS -gradienter er en fordel for enhver programvare designer eller utvikler. Fra denne artikkelen lærer du alt du trenger å vite for å begynne å inkorporere CSS -gradienter i prosjektene dine.
Hva er en CSS -gradient?
En CSS -gradient er i hovedsak kombinasjonen av to eller flere farger som jevnt overgår fra en til den neste. Overgangstilstanden til en CSS -gradient er avhengig av typen gradient som brukes. Det er to hovedtyper gradienter som vanligvis brukes i programvaredesign: lineær og radial.
Imidlertid er det en tredje type gradient som er mindre populær og kjent som den koniske gradienten.
CSS Gradients Syntax
Background-image: gradient-type (direction, color1, color2);
CSS-gradienten bør tilordnes CSS-egenskapen med bakgrunnsbilde. Gradienttypen kan være en av flere; lineær-gradient, radial-gradient eller konisk-gradient. Gradienttypen blir fulgt av åpne og lukke parenteser som inneholder gradientens overgangsretning, 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 et komma.
Hva er en lineær gradient?
Den lineære gradienten er den mest populære CSS -gradienten. Den skaper en horisontal, vertikal eller diagonal overgangsgradient ved hjelp av to eller flere farger.
CSS lineært gradienteksempel
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Koden ovenfor gir følgende CSS -gradient:
Det er en hovedkomponent i gradientsyntaksen utelatt fra eksemplet ovenfor. Denne komponenten er gradientens overgangsretning, og den ble utelatt fordi standardjusteringen av den lineære gradienten er vertikal (topp-til-bunn); det er ønsket utgang i dette eksemplet.
Koden ovenfor gir samme resultat som den følgende kodelinjen. Den eneste forskjellen mellom de to er retningsdelen av koden.
Bruke det nedre lineære gradienteksemplet
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Som du kan se fra utgangen, skaper koden ovenfor en gradient som starter med blått på toppen og deretter sakte overgår til det oransje nederst. Hvis du ville reversere rekkefølgen på fargene, kan du ganske enkelt erstatte til bunns med til toppen og dette vil reversere retningen til gradienten og produsere følgende utgang:
I likhet med den vertikale justeringen kan den horisontale justeringen av en gradient oppnås ved bruk av to sett med retningssøkeord: til venstre og til høyre , som vil produsere henholdsvis følgende utganger.
batteriikonet vises ikke i oppgavelinjen Windows 10
Diagonal lineær gradient
Det er mulig å oppnå en diagonal lineær gradientovergang i en hvilken som helst retning av en lineær gradient. Det er bare fire spesifikke lister over søkeord du trenger å vite for å gjøre dette mulig.
- Nederst til høyre
- Nederst til venstre
- Øverst til høyre
- Øverst til venstre
Bruke det diagonale lineære gradienteksemplet
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Eksemplet ovenfor gir følgende utgang:
Som du kan se fra utgangen ovenfor, gjør den lineære gradienten sin overgang i en diagonal retning som beveger seg fra øvre 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 retningen. De som overgår i horisontal retning, vil ha hver ny 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
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodelinjen ovenfor gir følgende utgang:
Som du kan se, legges hver ny farge til høyre for gradienten, noe som til slutt skaper en regnbue. Den samme effekten kan oppnås i vertikal retning; Imidlertid vil det spesifikke fargearrangementet på den lineære gradienten avhenge av søkeordet i vertikal retning (til topp eller ned).
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 radialgradienten en sirkulær gradient som flyter fra sentrum til ytterkantene.
Bruke eksempelet Radial Gradient
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Kodelinjen ovenfor gir følgende utgang:
Endring av Radial Gradient Center
Som standard starter en radial gradient i midten av gradienten; Imidlertid er det mulig å endre utgangspunktet med introduksjonen av noen få søkeord.
beste videoredigeringsapp for android
Endre eksempel på startposisjon for radial gradient
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Kodelinjen ovenfor gir følgende utgang:
Som du kan se fra utgangen over starter gradienten nå fra øverste høyre hjørne i stedet for i midten. Denne endringen er mulig på grunn av inkluderingen av søkeordet øverst til høyre i koden ovenfor. Følgende liste over søkeord kan også brukes til å endre utgangspunktet for den radielle gradienten:
- Øverst til venstre
- Nede til høyre
- Nede til venstre
Flerfargede radielle gradienter
I likhet med den lineære gradienten kan den radielle gradienten 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 den radiale gradienten til nye farger på ytterkanten.
Eksempel på flerfarget radial gradient
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodelinjen ovenfor gir følgende utgang:
Tilpasse gradienter
Så langt har du sett hvordan du endrer retningen og midtpunktet til en gradient, men du har ikke sett hvordan du tilpasser en gradient. Å tilpasse en gradient kan høres ut som mye arbeid, men når du forstår det grunnleggende for å lage en CSS -bakgrunnsgradient, er det neste åpenbare trinnet å lære hvordan du gjør CSS -gradientene mer unike.
Windows 10 første ting å gjøre
Som standard opptar fargene i en gradient en jevnt fordelt plass med hver farge jevnt overgang til den etter den. Så hvis to farger kombineres for å danne en gradient, vil hver farge oppta halvparten av plassen som er tilgjengelig mens du går over fra den ene til den andre. Hvis tre farger kombineres, vil hver farge oppta en tredjedel av plassen som er tilgjengelig.
Med en tilpasset gradient kan du definere hvor mye plass en farge vil oppta i en gradient ved eksplisitt å tildele farge-stopp-posisjon .
Tilpasse et lineært gradienteksempel 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Kodelinjen ovenfor gir følgende utgang:
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 den vanlige posisjonen, og fordi den andre fargen også er den endelige fargen i gradienten, strekker den seg naturlig til slutten .
Hvis du skulle plassere 30% i koden ovenfor på slutten av den første fargen, burde ting blitt tydeligere.
Tilpasse et lineært gradienteksempel 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Koden ovenfor gir følgende utgang.
Utgangen ovenfor viser tydelig den første fargen i gradienten som stopper ved 30% -punktet for den andre fargen i gradienten. Dette eksemplet sammen med det ovenfor skal bidra til å gjøre tilpasning av fargestopp lettere for deg å forstå.
Tilpassing av en radial 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 radial gradient, er å endre gradienttypen og retningen.
Lag CSS -gradienter har aldri vært enklere
Denne opplæringsartikkelen gir deg verktøyene for å identifisere og lage lineære og radielle gradienter. Hvis du har kommet dit, lærte du hvordan du endrer retningen og midten av en gradient. I tillegg har du nå ferdighetene til å tilpasse CSS -gradienter og lage unike bakgrunnsgradienter.
Men hvis du ikke vil gå rett inn i å lage nye og unike gradienter, kan du begynne med å lage noen flotte allerede eksisterende.
Dele Dele kvitring E -post 27 Stilige CSS -bakgrunnsgradienteksemplerSolide farger er det i fjor. Gradienter er inne! Men hvordan lager du dem i CSS?
Les neste Relaterte temaer- Programmering
- Webutvikling
- Webdesign
- CSS
Kadeisha Kean er en fullstabel programvareutvikler og teknisk/teknologisk skribent. Hun har den særegne evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver nybegynner i teknologi. Hun brenner for å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).
Mer fra Kadeisha KeanAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere