CSS3-eksempler: Lineære og radiale gradienter

Et forrige innlegg introduserte CSS3 lett berørt graderinger og demonstrerte en enkel lineær gradient ved bruk av bakgrunnsbildeegenskapen inkludert gradient og lineær gradient. Dette segmentet med gradienter vil dykke litt dypere i forskjellige andre effekter som kan brukes til å manipulere gradientegenskapen i websidedokumenter. Forløp i CSS3 kan inkludere fargestopp, inkludert jevnlige stopp, vilkårlige stopp, lineære graderinger, lineær bakgrunn, radielle sentre og radielle posisjoner.

Enkel lineær gradient

Eksempelet CCS3-kode nedenfor er for en enkel topp til bunn gradient; legg merke til fallbackfargen og png-bildet som er referert til før prefiksgradientene, og deretter vises prefiksene for Safari, Chrome, Firefox, IE og Opera neste.

Syntaksforskjeller

Avhengig av nettleser, endres syntaksen bare litt som du vil se i syntaks og prefikseksempler for Mozilla Firefox (-moz), Safari og Chrome (-webkit) og Opera (-o-).

Mozilla støtter for øyeblikket bare CSS-gradienter som verdier for bakgrunnsbildeegenskapen, så vel som innenfor den korte ordningen. Du angir en gradientverdi i stedet for en URL-adresse. Her er syntaks for Mozilla Firefox:
 -moz-lineær gradient (||, ?, ,  *) 
Punkt er en posisjon, tolket på samme måte som bakgrunnsposisjon eller -moz-transform-opprinnelse. Dette brukes til å definere startpunktet for gradienten. Det kan spesifiseres som en prosentandel, i piksler, eller ved å bruke "venstre", "midt" eller "høyre" for horisontal og "topp", "midt" eller "bunn" for vertikal posisjonering. Posisjonene starter fra øverste venstre hjørne av det berørte elementet. Hvis bare en av den horisontale eller vertikale posisjoneringen er spesifisert, er den andre retningen standard "sentrum". Vinkel er en vinkeretning for gradienten. Stopp er verdien som består av en verdi, etterfulgt av en valgfri stoppposisjon (enten en prosentandel mellom 0% og 100% eller en langs gradientaksen).

Gjengivelse av fargestopp i CSS-gradienter følger de samme reglene som fargestopp i SVG-gradienter.

Safari og Chrome bruker bakgrunnsbildet med -webkit- prefikset:
 bakgrunnsbilde: -webkit-gradient-lineær (||, ?, , ); 

Legg merke til forskjellen med hensyn til måten det er referert til lineær gradient for -webkit- for Safari 4+, Chrome 1-9:

 bakgrunnsbilde: -webkit-gradient (lineær ||, ?, , ); 
Opera støtter CSS3-gradienter i et lignende format med -o- prefikset:
 bakgrunnsbilde: -o-lineær gradient (||, ?, , ); 

CSS3-eksempelskode for en enkel topp-ned-gradient:

 .gradient1-bg { 
 / * fallback farge * / 
 background-color: #CCFFFF; 
 / * fallback image * / 
 bakgrunnsbilde: url (bilder / fallback-gradient1.png); 
 / * Safari 4+, Chrome 1-9 * / 
 bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 0%, fra (#CCCCFF), til (#CCFFFF)); 
 / * Safari 5.1+, Mobile Safari, Chrome 10+ * / 
 bakgrunnsbilde: -webkit-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * Firefox 3.6+ * / 
 bakgrunnsbilde: -moz-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * IE 10+ * / 
 bakgrunnsbilde: -ms-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * Opera 11.10+ * / 
 bakgrunnsbilde: -o-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 høyde: 100px; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 

Du lurer kanskje på, hvorfor legge inn bildereferansen som et tilbakeblikk hvis du bruker spesielle gradientegenskaper? Den viktigste fordelen med nettstedet ditt er at nettleserne som støtter gradientstylingegenskapene hopper over bildereferansen, noe som til slutt reduserer de totale HTTP-forespørslene og derfor bidrar til å øke belastningstidene for nettstedet.

Nedenfor er eksemplet HTML-kode for denne lineære gradienten, noe som resulterer i figur A som gjengitt i Chrome 15.0.874:

Enkel topp-ned-gradient

Figur A

Øverst til venstre nederst til høyre

Å bruke vinkler for å endre gradienten krever bare -45% i -webkit for eldre versjoner av Safari 4+, Chrome 1-9, og deretter -45deg for de resterende prefiksene som vises i følgende eksempel:

 .gradient2-bg { 
 / * fallback farge * / 
 bakgrunnsfarge: grønn; 
 / * fallback image * / 
 bakgrunnsbilde: url (bilder / fallback-gradient2.png); 
 / * Safari 4+, Chrome 1-9 * / 
 bakgrunnsbilde: -webkit-gradient (lineær, -45% 0%, 0% 0%, fra (grønn), til (gul)); 
 / * Safari 5.1+, Mobile Safari, Chrome 10+ * / 
 bakgrunnsbilde: -webkit-lineær gradient (-45deg, grønn, gul); 
 / * Firefox 3.6+ * / 
 bakgrunnsbilde: -moz-lineær gradient (-45deg, grønn, gul); 
 / * IE 10+ * / 
 bakgrunnsbilde: -ms-lineær gradient (-45deg, grønn, gul); 
 / * Opera 11.10+ * / 
 bakgrunnsbilde: -o-lineær gradient (-45deg, grønn, gul); 
 høyde: 200px; 
 bredde: 200px; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 
Med eksemplet HTML-kode nedenfor, resulterer denne koden i figur B som gjengitt i Chrome 15.0.874:

Vinkel oppover til venstre og nederst til høyre

Figur B

Radiale gradienter

Nå som vi har studert lineære graderinger og har det under beltene, la oss se på å lage radielle gradienter. Vi bruker egenskapen radial gradient, som fungerer med Firefox, Safari, Chrome og Opera fra og med dette skrivet.

La oss først studere basissyntaxen før vi får inn noen prøvekoder
 radial-gradient (||, ? ||, ?, ,  *) 

Der følgende verdier har de tilhørende beskrivelsene:

Posisjon tolkes på samme måte som bakgrunnsposisjon eller transform-opprinnelse. Hvis utelatt, er standard senter. Vinkel etablerer gradientlinjen, som strekker seg fra utgangspunktet i denne vinkelen; dette er 0deg som standard. Shape er sirkel (som betyr at gradientens form er en sirkel med konstant radius) eller ellipse (noe som betyr at formen er en akselinjisert ellipse). Standardverdien er ellipse. Størrelseskonstanter kan være nærmeste side, nærmeste hjørne, fjerneste side, fjerneste hjørne eller inneholde, som er et synonym for nærmeste side, og omslag, som er et synonym for fjerneste hjørne. Stoppverdi består av en verdi, etterfulgt av en valgfri stoppposisjon (enten en prosentandel mellom 0% og 100% eller en langs gradientaksen). Gjengivelse av fargestopp i CSS-gradienter følger de samme reglene som fargestopp i SVG-gradienter.

I følge Mozilla Developers Network løper også radiale gradienter langs en akse. Ved hvert endepunkt av aksen er en radius spesifisert. Dette kan tenkes å opprette to "sirkler", hvor sentrum for hver sirkel er spesifisert av punktet og radius er spesifisert av radiuslengden. Gradienten løper utover fra omkretsen av den indre sirkelen til omkretsen av den ytre sirkelen.

Følgende eksempel radiell gradient CSS3-kode setter posisjonen til sentrum, med formen som en sirkel, og med farger slutter å gå fra svart til rød.

 .radial-sentrum { 
 / * fallback farge * / 
 bakgrunnsfarge: rød; 
 / * fallback image * / 
 bakgrunnsbilde: url (bilder / radial_center.png); 
 bakgrunnsposisjon: sentrumssenter; bakgrunn-gjenta: ikke-gjenta; 
 / * Firefox 3.6+ * / 
 bakgrunn: -moz-radial-gradient (sirkel, svart, rød); 
 / * Safari 4-5, Chrome 1-9 * / 
 bakgrunn: -webkit-gradient (radial, sentrumssenter, 0, sentrumssenter, 200, fra (svart), til (rød)); 
 / * Safari 5.1+, Chrome 10+ * / 
 bakgrunn: -webkit-radial-gradient (sirkel, svart, rød); 
 høyde: 200px; 
 bredde: 200px; 
 polstring: 5px; 
 margin-venstre: 5 px; 
 } 
Se eksemplet HTML-kode som resulterer i figur C som gjengitt i Chrome 15.0.874:

Radial sentrumsgradient

Figur C

Nærmeste side

Den nærmeste sideverdien er synonymt med innholdsverdien, og i dette eksemplet vil vi stille radialet med midtposisjonene til 50px 50px som en sirkelform, som setter gradientkantene til å møte sidene av elementet som er nærmest gradientens senter:

 .radial-nærmeste-side { 
 / * fallback farge * / 
 bakgrunnsfarge: # 2F2727; 
 / * fallback image * / 
 bakgrunnsbilde: url (bilder / radial_cs.png); 
 bakgrunn-gjenta: ikke-gjenta; 
 / * Firefox 3.6+ * / 
 bakgrunnsbilde: -moz-radial-gradient (50px 50px, sirkel nærmeste side, # 1a82f7, # 2F2727); 
 / * Safari 5.1+, Chrome 10+ * / 
 bakgrunnsbilde: -webkit-radial-gradient (50px 50px, sirkel nærmeste side, # 1a82f7, # 2F2727); 
 høyde: 200px; 
 bredde: 200px; 
 polstring: 5px; 
 margin-left: 5px 
 } 

Dette eksemplet gjengis øverst til venstre i divisjonen som vist i Chrome 15.0.874:

Figur D

Nærmeste hjørne

Nå vil vi bruke størrelsen nærmest hjørne der denne verdien får gradientens kant til å møte hjørnet på elementet som er nærmest midtpunktet til gradienten, noe som får en del av gradientens øverste og venstre form til å bli avkuttet noe; dette er et resultat av at gradienten skyves inn i hjørnet av elementet. Den eneste oppdateringen til kodeeksemplet ovenfor er å endre størrelsesverdiene fra nærmeste side til nærmeste hjørne i hver nettleseregenskaper. Legg merke til webkiteksemplet vist nedenfor, og resultatet som vist i Chrome 15.0.874:

 bakgrunnsbilde: -webkit-radial-gradient (50px 50px, sirkel nærmeste hjørne, # 1a82f7, # 2F2727); 

Figur E

Lengst side

Lengst sideværdi gjør det motsatte av det nærmeste hjørnet, og får gradientens kanter til å møte sidene av elementet som er lengst fra gradientens sentrum, og gradienten blir tvunget til å strekke seg for å berøre de fjerneste kantene av elementet. I dette eksemplet var den eneste endringen til eiendommen å oppdatere størrelsesverdien til fjerneste side i hver nettleseregenskap. Resultatet vises i Chrome 15.0.874 nedenfor:

Figur F

Lengst hjørne

Den lengste hjørneverdien som er synonymt med dekkverdien får gradienten til å strekke seg til hjørnet av elementet som er lengst borte fra gradientens midtposisjon slik at gradienten dekker mye mer av elementet. I dette tilfellet var den eneste endringen å oppdatere størrelsesverdien til radial-fjerneste hjørne i hver nettleseregenskaper. Resultatet vises i Chrome 15.0.874 nedenfor:

Figur G

I neste segment på CSS3 Gradients vil vi ha det morsommere med å stille inn vilkårlige fargestopp, og til og med fargestopp med både lineære og radielle gradienter.

© Copyright 2020 | mobilegn.com