Hvordan man bruker CSS3-gradienter - dummier

En CSS3-gradient (som er en blanding mellom to eller flere farger) kan være en fin bakgrunn. Tidligere ville utviklere opprette en gradient ved å bygge en tynn gradientstrimmel i et bilderedigeringsprogram, og deretter bruke gjentagelses-x eller repetisjon-reglene for å få det mindre bildet til å replikere på tvers av siden. Dette var en fin teknikk, men det var ikke veldig fleksibelt, og bare relativt enkle lineære gradienter var mulige.

CSS3 har lagt til en bemerkelsesverdig gradientregel som gjør gradienter nativt gjennom CSS. Når denne teknikken er fullt vedtatt, gjør det gradvis lettere å arbeide med.

CSS3 støtter to hovedtyper av gradienter: lineær og radial. En lineær gradient endrer farger langs en rett linje, og en radial gradient utstråler utover fra et midtpunkt.

Gradientmekanismen har vært en av de langsommere delene av CSS som skal standardiseres og adopteres, så den endrer seg, men det ser ut til at nettleserne endelig settes på en standard. Dessverre er leverandørspesifikke prefikser nødvendig for tiden.

Slik bygger du en enkel gradient

Den enkleste gradienten er vist i boks 1. Det varierer fra venstre til høyre, starter med rødt og slutter med hvitt.

# box1 {bakgrunnsbilde: lineær gradient (venstre, rød, hvit); bakgrunnsbilde: -moz-lineær-gradient (venstre, rød, hvit); bakgrunnsbilde: -webkit-lineær-gradient (venstre, rød, hvit);}

Slik bygger du en enkel lineær gradient:

Definer velgeren.

En gradient er definert i CSS, og du må bruke noen av de vanlige CSS-valgene dine for å bestemme hvilket element du vil legge til gradienten til.
Bruk bakgrunnsbildregelen.

En gradient er en spesiell form for bilde. Du kan bruke bakgrunnsbildregelen til å bruke en gradient til bakgrunnen til et hvilket som helst element, inkludert hele kroppen på siden.
Invoke lineær-gradientfunksjonen.

Noen få CSS-elementer krever parentes fordi de teknisk sett er funksjoner. Sondringen spiller ingen rolle akkurat nå, men du må innarbeide parentesene når du bruker denne typen verdi. Linjærgradientteknikken er en funksjon.
Bestem retningen som gradienten vil strømme.

Du kan lage en gradientstrøm i hvilken retning du vil inne i elementet. Indikerer venstre fører elementet til å strømme fra venstre til høyre. Du kan bruke til å flyte fra topp til bunn, eller øverst til venstre for å gå fra øverst til venstre til nederst til høyre. Bruk en kombinasjon av topp, venstre, bunn og høyre. Du kan også angi en vinkel i grader, som vist i det neste eksemplet.
Angi en startfarge.

Bruk noen av standardfargeværktøyene (farge navn, hex-farger, rgb () / rgba () eller hsl ()) for å bestemme begynnelsen farge.
Angi en sluttfarge.

Den siste farge som er angitt, vil være sluttfargen til gradienten. Graden strekker seg fra begynnelsen til sluttfarge jevnt.
Gjenta med nettleserutvidelser.

Du må legge til varianter for de spesifikke nettleserne. Du må lage en ny versjon av bakgrunnsbildregelen for hver hovedleverandør.

Hvordan lage en mer interessant gradient

Når du ser på boks 2, ser du en mer komplisert gradient som viser flere farger og en interessant vinkel.

# box2 {bakgrunnsbilde: lineær gradient (75deg, rød, hvit 33%, hvit 66%, blå); bakgrunnsbilde: -moz-lineær-gradient (75deg, rød, hvit 33%, hvit 66%, blå); bakgrunnsbilde: -webkit-lineær-gradient (75deg, rød, hvit 33%, hvit 66%, blå);}

Slik legger du til flere pizazz i dine gradienter.

Bruk en vinkel for retning.

I stedet for å spesifisere gradientretningen med standard topp / venstre søkeord, kan du angi en startvinkel. Vinkler måles matematisk i grader, med 0 kommer fra høyre og 90 kommer fra topp ned. Du må spesifisere graden måling med deg, så 75 grader er skrevet som 75deg.
Legg til så mange farger som du ønsker.

En gradient kan ha et hvilket som helst antall farger i den. Hver endring i farger kalles en fargestopp . Eksemplet viser tre forskjellige farger.
Bestem hvor fargen slutter å skje.

Som standard er fargene jevnt fordelt langs gradienten. Hvis du vil, kan du flytte hvilken som helst farge som skal vises hvor som helst på den gradienten du ønsker. Fargestoppestedene er angitt med prosenter. Det er ikke nødvendig å legge til en plassering for første og siste fargestopp, da de antas å være 0% og 100%.
Lag et fargebånd ved å gi to stopp av samme farge.

Boks 2 har et bånd av hvitt. For å få denne effekten ble det produsert to fargestopp med hvit, en på 33% og den andre ved 66%. Dette bryter gradienten grovt inn i tredjedeler.
Sett to farger på samme sted for en abrupt fargeendring.

Hvis du vil ha en abrupt fargeendring, må du bare sette to forskjellige farger i samme prosentandel.
Gjenta for alle nettlesere.

Igjen må du vurdere de ulike nettleserne til denne teknikken blir mer standardisert.

Hvordan bygge en radialgradient

CSS3 støtter en annen gradienttype kalt radialgradienten . Den grunnleggende ideen er den samme, unntatt i stedet for å følge en rett linje som en lineær gradient, ser en radial gradient fram til å strømme fra et sentralt sted i elementet og utstråle utad.

Den grunnleggende radiale gradienten vist i boks 3 er opprettet med denne CSS-koden:

# box3 {bakgrunnsbilde: radial-gradient (hvit, blå); bakgrunnsbilde: -moz-radial-gradient (hvit, blå); bakgrunnsbilde: -webkit-radial-gradient (hvit, blå);}

Som du kan se, opprettes den grunnleggende radiale gradienten omtrent som en lineær gradient, med unntak av at den bruker radialgradientfunksjonen i stedet for lineær- gradientfunksjon.

Radialgradienter har mange alternativer, noe som gjør dem ganske lovende, men nettleserens støtte til disse ulike standardene er ganske spotty. Boks 4 har en radial gradient med tre farger:

# box4 {bakgrunnsbilde: radial-gradient (rød, hvit, blå); bakgrunnsbilde: -moz-radial-gradient (rød, hvit, blå); bakgrunnsbilde: -webkit-radial-gradient (rød, hvit, blå);}

Det er også mulig å endre formen på gradienten fra sirkel til ellipse, for å endre sentrum av gradienten til et annet punkt inne i element, og for å angi fargestopp. Du må sjekke gjeldende spesifikasjoner for å se hvordan disse tingene er gjort, da de fortsatt er ganske eksperimentelle.