CSS3 Gradients: Innstilling av farge stopper

I vårt forrige segment på CSS3 Gradients gjennomgikk vi lineære graderinger, både fra topp til ned og øverst fra venstre til nede til høyre; i tillegg har vi gjennomgått radiale gradienter inkludert flere størrelser. I dette segmentet vil vi gjennomgå innstilling av vilkårlige fargestopp, og angi jevnlige fargestopp.

Innstilling av vilkårlig farge stopper

Ved å stille inn posisjoner og farge stopper som prosent i syntaksen kan du definere hvilke farger som begynner og slutter for gradienten, sammen med eventuelle mellomfarger du ønsker å stille inn. I tillegg har du også muligheten til å legge til posisjoner for hver farge. Her er et eksempel med fem farger plassert fra venstre, og deretter med spesifikke intervaller ved bruk av prosenter:

 .radial-arbitrær-stopp-venstre { 
 bakgrunn: -moz-radial-gradient (venstre, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 bakgrunn: -webkit-radial-gradient (venstre, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 bakgrunn: -o-radial-gradient (venstre, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 høyde: 200px; 
 bredde: 400 piksler; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 

Her er gradienten som gjengitt i Chrome 15.0.874:

Figur A

Denne variasjonen på vilkårlige fargestanser oppdaterer posisjonsstørrelsen til lengst hjørne som vist i eksempelkoden nedenfor:

 .radial-arbitrær-stopper-lengst hjørne { 
 bakgrunn: -moz-radial-gradient (50px 50px, sirkel lengst til hjørnet, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 bakgrunn: -webkit-radial-gradient (50px 50px, sirkel lengst til hjørnet, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 bakgrunn: -o-radial-gradient (50px 50px, sirkel lengst til hjørnet, # 2F2727, # 1a82f7 10%, # 2F2727, # 1a82f7 90%, # 2F2727); 
 høyde: 200px; 
 bredde: 400 piksler; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 

Dette eksemplet er gjengitt i Chrome 15.0.874:

Figur B

I dette siste eksemplet ved bruk av vilkårlige fargestanser oppdaterer vi posisjonen til sentrum og benyttet også et annet fargeskjema av blått, grønt, gult, lilla og grått:

 .radial-arbitrar-stops-center { 
 bakgrunnsbilde: -webkit-radial-gradient (sentrumssenter, 100px 100px, blå 10%, grønn 50%, gul 65%, lilla 85%, grå 100%); 
 bakgrunnsbilde: -moz-radial-gradient (sentrumssenter, 100px 100px, blå 10%, grønn 50%, gul 65%, lilla 85%, grå 100%); 
 høyde: 200px; 
 bredde: 400 piksler; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 

Her er resultatet som gjengitt i Chrome 15.0.874:

Figur C

Selvfølgelig kan vilkårlige stopp også brukes på lineære graderinger. I dette eksemplet oppdaterer vi stilen fra radial til lineær og fjerner posisjonsverdien, oppdaterer deretter noen få prosentandeler og vi har følgende kode:

 .linear-arbitrær-stopper { 
 bakgrunnsbilde: -webkit-lineær gradient (blå 10%, grønn 40%, gul 65%, lilla 75%, grå 100%); 
 bakgrunnsbilde: -moz-lineær gradient (blå 10%, grønn 40%, gul 65%, lilla 75%, grå 100%); 
 høyde: 200px; 
 bredde: 400 piksler; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 

Dette resulterer i følgende som gjengitt i Chrome 15.0.874:

Figur D

Innstilling av jevn farge stopper

Å stille jevn stopp er bare et spørsmål om å spesifisere posisjonen og deretter fargene for gradienten, et hvilket som helst antall farger kan legges til, og de vil bli fordelt jevnt over gradienten. To eksempler nedenfor viser jevn fargestopp for lineær gradient satt til venstre.

 .even-stopp-lineær-venstre { 
 bakgrunnsbilde: -moz-lineær gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 bakgrunnsbilde: -webkit-lineær gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 bakgrunnsbilde: -o-lineær gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 polstring: 5px; 
 margin-left: 5px 
 } 

Her er det første eksemplet som vist i Chrome 15.0.874:

Figur E

Og dette eksemplet demonstrerer jevne fargestopp for en radiell venstre stillingsgradient.

 .even-stopp-radial-venstre { 
 bakgrunnsbilde: -moz-radial-gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 bakgrunnsbilde: -webkit-radial-gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 bakgrunnsbilde: -o-radial-gradient (venstre, svart, blå, svart, grønn, blå, grønn, svart, blå, svart); 
 polstring: 5px; 
 margin-left: 5px 
 } 

Figur F

Som du ser er det mange måter å representere gradient som bilder som bruker kraften til CSS3. Den viktigste fordelen for nettstedet ditt er reduksjonen i HTTP-samtaler som vil bidra til å forbedre nettstedets respons og lastetid, og også reduserer det utviklingen tid det tar for grafiske designere å generere gradientbilder fra forskjellige grafiske programvareprogrammer.

© Copyright 2021 | pepebotifarra.com