01 nga 04
Krijimi i gradientëve linearë ndër-shfletues me CSS3
Gradiente lineare
Lloji më i zakonshëm i gradientit që do të shihni është një gradient linear i dy ngjyrave. Kjo do të thotë se gradient do të lëvizë në një vijë të drejtë ndryshon gradualisht nga ngjyra e parë në të dytën përgjatë vijës. Imazhi në këtë faqe tregon një gradient të thjeshtë majtas-djathtas prej # 999 (gri të errët) në #fff (të bardhë).
Gradientët linear janë më të lehtë për tu përcaktuar dhe kanë më shumë mbështetje në shfletues. Gradientet lineare CSS3 mbështeten në Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ dhe Safari 4+. Internet Explorer mund të shtojë shkallët duke përdorur një filtër dhe i mbështet ato në IE 5.5. Kjo nuk është CSS3, por është një opsion për përputhshmërinë ndër-shfletuese.
Kur përcaktoni një gradient ju duhet të përcaktoni disa gjëra të ndryshme:
- Çfarë lloji gradient është - lineare ose radiale
- Ku duhet të fillojë gradimi
- Ku shkallëzimi duhet të ndalet
- Cilat ngjyra janë në gradient dhe ku duhet të fillojnë dhe të ndalojnë
Për të përcaktuar gradientin linear duke përdorur CSS3, shkruani:
gradient lineare ( kënd ose anën ose këndin , ndalesën e ngjyrave , ndalimin e ngjyrave )
- Së pari ju përcaktoni llojin e gradientit me emrin linear- gradient.
- Pastaj, përcaktoni pikat e fillimit dhe të ndalimit të gradientit në një nga dy mënyra: këndi i vijës në gradë nga 0 në 359, me 0 gradë duke treguar drejt. Ose me funksionin e "anës ose këndit", të tilla si majtas, djathtas, fund dhe lart. Këto do të shpjegohen më në detaje në faqen tjetër. Nëse i lini këto, gradienti do të rrjedhë nga maja në fund të elementit.
- Pastaj përcaktoni ndalesat e ngjyrave. Ju përcaktoni ndalesat e ngjyrave me kodin e ngjyrave dhe një përqindje opsionale. Përqindja i tregon shfletuesit ku në linjë do të fillojë ose të përfundojë me atë ngjyrë. Parazgjedhja është vendosja e ngjyrave në mënyrë të barabartë përgjatë linjës. Do të mësoni më shumë për ndërprerjet e ngjyrave në faqen 3.
Pra, për të përcaktuar gradientin e mësipërm me CSS3, shkruani:
linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Dhe për ta vendosur atë si sfondin e një DIV ju shkruani:
div {
background-image: lineare-gradient (majtas, # 999999 0%, #ffffff 100%;
}
Zgjerimet e shfletuesit për gradientët linear CSS3
Për të marrë gradient tuaj për të punuar ndër-browser, ju duhet të përdorni zgjerimet e shfletuesit për shumicën e shfletuesit dhe një filtër për Internet Explorer 9 dhe më të ulët (aktualisht 2 filtra). Të gjitha këto marrin të njëjtat elementë për të përcaktuar gradientin tuaj (përveç se mund të definoni gradientët me dy ngjyra në IE).
Filtrat e Microsoft dhe Extension -Internet Explorer janë më sfiduese për të mbështetur, sepse keni nevojë për tri linja të ndryshme për të mbështetur versionet e ndryshme të shfletuesit. Për të arritur ngjyrën e mësipërme në ngjyrë të bardhë, ju do të shkruanit:
/ * IE 5.5-7 * /
filtri: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension funksionon si pronë CSS3, vetëm me zgjerimin -moz-. Për të marrë gradientin e mësipërm për Firefox, shkruani:
-moz-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Opera Extension -The-extension shton gradientet në Opera 11.1+. Për të marrë gradientin e mësipërm, shkruani:
-o-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Extension Webkit -The -webkit- extension funksionon shumë si prona CSS3. Për të përcaktuar gradientin e mësipërm për Safari 5.1+ ose Chrome 10+ shkruani:
-webkit-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Ekziston edhe një version i vjetër i zgjerimit të Webkit që punon me Chrome 2+ dhe Safari 4+. Në të përcaktoni llojin e gradientit si vlerë, në vend se në emrin e pronës. Për të marrë ngjyrë gri në ngjyrë të bardhë me këtë zgjatje, shkruani:
-webkit-gradient (lineare, top majtas, lart i djathte, ngjyra-stop (0%, # 999999), color-stop (100%, # ffffff));
CSS3 Linear Gradient CSS Kodi
Për mbështetjen e plotë të shfletuesit për të marrë gradientin e bardhë në ngjyrë të bardhë, duhet së pari të përfshijë një ngjyrë të ngurta rezervë për shfletuesit që nuk mbështesin gradientët dhe elementi i fundit duhet të jetë stili CSS3 për shfletuesit që janë plotësisht në përputhje. Pra, ju shkruani:
sfond: # 999999;
sfondi: -moz-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (lineare, top majtas, lart i djathte, ngjyra-stop (0%, # 999999), color-stop (100%, # ffffff));
background: -webkit-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
sfondi: -o-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
sfondi: -ms-linear-gradient (majtas, # 999999 0%, #ffffff 100%);
filtri: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
sfondi: linear-gradient (majtas, # 999999 0%, #ffffff 100%);
Faqet e ardhshme në këtë tutorial shpjegojnë pjesët e një gradient në më shumë detaje dhe faqja e fundit ju tregon një vegle që është një mënyrë e shkëlqyeshme për të krijuar gradientë CSS3 automatikisht.
Shihni këtë gradient linear në veprim duke përdorur vetëm CSS.
02 nga 04
Krijimi i gradientëve diagonal - këndi i gradientit
Pikat e fillimit dhe të ndalimit përcaktojnë këndin e gradientit. Shkallët më lineare janë nga lart poshtë ose nga e majta në të djathtë. Por është e mundur për të ndërtuar një gradient që lëviz në një vijë diagonale. Imazhi në këtë faqe tregon një gradient të thjeshtë që lëviz në një kënd 45 gradë përgjatë imazhit nga e djathta në të majtë.
Kënde për të përcaktuar linjën e gradientit
Këndi është një vijë në një rreth imagjinar në qendër të elementit. 0 pikë pikë më lart, 90 pikë pikë në të djathtë, 180 pikë pikë poshtë, dhe 270 pikë pikë në të majtë. Mund të përcaktoni çdo kënd nga 0 në 359 gradë.
Ju duhet të vini re se në një katror, një kënd 45 shkallë lëviz nga këndi i majtë në të djathtën e poshtme, por në një drejtkëndësh pikat e fillimit dhe të fundit janë pak jashtë formës, siç mund ta shihni në imazh.
Mënyra më e zakonshme për të përcaktuar një gradient diagonale është të përcaktojë një qoshe, siç është e djathta e sipërme dhe shkalla e gradientit do të lëvizë nga ai qoshe në këndin e kundërt. Ju mund të përcaktoni postionin e fillimit me fjalë kyçe të mëposhtme:
- më i lartë
- e drejtë
- fund
- majtas
- qendër
Dhe ato mund të kombinohen për të qenë më specifike, siç janë:
- lart djathtas
- lart majtas
- qendra e lartë
- fundi i djathte
- fund majtas
- në fund të qendrës
- qendra e djathtë
- qendra e majtë
Këtu është CSS për një gradient të ngjashëm me atë të fotografuar, e kuqe në të bardhë që lëviz nga këndi i djathtë në pjesën e poshtme të majtë:
sfond: ## 901A1C;
background-image: -moz-linear-gradient (lart e djathtë, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (lineare, lart e djathtë, fund i majtë, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
background: -webkit-linear-gradient (lart e djathtë, # 901A1C 0%, #ffffff 100%);
sfondi: -o-linear-gradient (lart e djathtë, # 901A1C 0%, #ffffff 100%);
sfondi: -ms-linear-gradient (lart e djathtë, # 901A1C 0%, #ffffff 100%);
sfondi: linear gradient (lart e djathtë, # 901A1C 0%, #ffffff 100%);
Ju mund të keni vënë re se në këtë shembull nuk ka filtra IE. Kjo është për shkak se IE lejon vetëm dy lloje të filtrave: lart poshtë (default) dhe e majta në të djathtë (me GradientType = 1 switch).
Shihni këtë gradient linear diagonal në veprim duke përdorur vetëm CSS.
03 nga 04
Ngjyra Ndalon
Me gradualizimet lineare CSS3, ju mund të shtoni ngjyra të shumta në gradientin tuaj për të krijuar efekte edhe më të këndshme. Për të shtuar këto ngjyra, shtoni ngjyrat shtesë në fund të pronës suaj, të ndara me presje. Ju duhet të përfshini ku në linjë ngjyrat duhet të fillojnë ose përfundojnë gjithashtu.
Filtrat e Internet Explorer mbështeten vetëm dy ndalesa me ngjyra, kështu që kur të ndërtoni këtë gradient, duhet të përfshini vetëm ngjyrat e para dhe të dyta që dëshironi të shfaqni.
Këtu është CSS për gradientin e mësipërm 3 ngjyra:
sfond: #ffffff;
sfondi: -moz-linear-gradient (majtas, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (lineare, top majtas, lart e djathtas, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
background: -webkit-linear-gradient (majtas, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-lineare-gradient (majtas, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
sfondi: -ms-linear-gradient (majtas, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtri: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
Sfondi: linear-gradient (majtas, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Shihni këtë gradient linear me tri ndërprerje të ngjyrave në veprim duke përdorur vetëm CSS.
04 nga 04
Bëni gradientët e ndërtimit më të lehtë
Ka dy vende që unë ju rekomandoj për t'ju ndihmuar për të ndërtuar gradiente, ata secili kanë përfitime dhe të meta për ta, unë nuk kam gjetur një ndërtues gradient që bën gjithçka ende.
Ultimate CSS Gradient Generator
Ky gjenerator i gradientit është shumë popullor sepse kryen në mënyrë të ngjashme ndërtuesit gradientë në programe si Photoshop. Më pëlqen, sepse ju jep të gjitha zgjerimet CSS, jo vetëm Webkit dhe Mozilla. Problemi me këtë gjenerator është se ai mbështet vetëm gradientet horizontale dhe vertikale. Nëse doni të bëni gradiente diagonale, duhet të shkoni te gjeneratori tjetër që unë rekomandoj.
CSS3 Gradient Generator
Ky gjenerator më mori pak më shumë për të kuptuar se sa i pari, por përkrah ndryshimin e drejtimit në diagonale.
Nëse e dini për një Gjenerator tjetër CSS Gradient që ju pëlqen më mirë se këto, ju lutem na tregoni .