Sot duam të vazhdojmë të flasim për CSS3, domethënë, për gradientët. Në artikujt e mëparshëm, ju thamë për parametra të ndryshëm në CSS3, duke ju lejuar të krijoni forma të thjeshta ose të aplikoni efekte. Këtë herë, le të flasim për dy lloje gradientësh - rrethore dhe eliptike.
Sintaksa e gradientit
Gradientët në CSS3 deklarohen duke përdorur parametrin sfond-imazh. Kjo është për shkak të synimit për të siguruar përputhshmëri më të mirë kur ne gjithashtu duhet të përdorim ngjyrën e sfondit në të njëjtin rregull. Pastaj, për të krijuar një gradient radial, ne thjesht e quajmë atë me funksionin radial-gradient (). Janë 4 vlera që duhet të përfshihen në funksion në mënyrë që gradienti të krijohet saktë.
Vlera e parë përcakton pozicionin e gradientit. Mund të përdorim përshkrues fjalë kyçe si lart, poshtë, qendër dhe majtas, ose mund të specifikojmë vlera më specifike si 50% 50% që gradienti të jetë në qendër ose 0% 0% që gradienti të fillojë në këndin e sipërm majtas.
Vlera e dytë përcakton formën dhe madhësinë e gradientit. Ekzistojnë dy argumente për gjenerimin e gradientëve, i pari është përgjegjës për elipsin (që është i paracaktuar) dhe i dyti është përgjegjës për gradientet rrethore.
Sa i përket parametrit të madhësisë së gradientit, këtu mund të përdorim 6 argumentet e mëposhtme:
* ana më e afërt - Forma e gradientit llogaritet drejt anës së bllokut që është më afër qendrës së gradientit (për gradientet rrethore), ose drejt anëve vertikale dhe horizontale (për elipset).
* Këndi më i afërt - Forma e gradientit llogaritet drejt këndit më të afërt të bllokut nga qendra e tij.
* ana më e largët - argumenti është paksa i ngjashëm me anën më të afërt, përveç se forma e gradientit tregon drejt anës më të largët të kutisë nga qendra e gradientit (ose vertikale ose horizontale).
* Këndi më i largët - Forma e gradientit drejtohet drejt cepit më të largët të bllokut nga qendra e gradientit.
* Përmbaj është i njëjtë me anën më të afërt.
* Mbulesa është e njëjtë me këndin më të largët.
Së fundi, parametrat e tretë dhe të katërt përcaktojnë kombinimin e ngjyrave. Pra, le të hedhim një vështrim se si e shkruajmë kodin për të krijuar gradient eliptik, dhe këtë herë do të përdorim vlerën e mbulesës në parametrin e madhësisë së gradientit në mënyrë që gradienti të përhapet shumë gjerë, duke mbuluar kontejnerin.
Trupi (
sfond-imazh: radial-gradient (qendra qendrore, mbulesa elips, # ffeda3, # ffc800);
}
Për të krijuar gradient rrethore, mund të bëjmë sa më poshtë:
Trupi (
sfond-imazh: radial-gradient (qendra qendrore, mbulesa rrethore, # ffeda3, # ffc800);
}
Siç sugjeron emri, forma e gradientit do të formojë një rreth.
Mbështetja e shfletuesit
Vetëm mbani në mend se në ky moment pothuajse të gjithë shfletuesit nuk kanë gjasa të jenë në gjendje të mbështesin plotësisht këtë parametër, prandaj, për shumë shfletues, do t'ju duhet të shkruani prefikse. Kështu që, kodi i plotë i cili do të funksionojë në të gjithë shfletuesit e listuar do të duket kështu (IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ dhe Opera 11+).
Trupi (
sfond-imazh: radial-gradient (në qendër të poshtme, mbulesë elipse, # ffeda3, # ffc800);
sfond-imazh: -o-radial-gradient (në qendër të poshtme, mbulesë elipse, # ffeda3, # ffc800);
sfond-imazh: -ms-radial-gradient (në qendër të poshtme, mbulesë elipse, # ffeda3, # ffc800);
sfond-imazh: -moz-radial-gradient (fundi qendror, mbulesa elips, # ffeda3, # ffc800);
sfond-imazh: -webkit-radial-gradient (fundi qendror, mbulesa elips, # ffeda3, # ffc800);
}
Mos harroni të shikoni demonstrimin dhe të shkarkoni kodin burimor.
a! Gradient është një mjet i shkëlqyeshëm për manipulimin e ngjyrave CSS3... Në vend që të përdorni një imazh për të krijuar një efekt gradient në një faqe interneti, është më e dobishme të përdorni gradient CSS3 dhe kështu "lehtësoni" faqen. Meqenëse përdoruesi nuk do të duhet të humbasë kohë dhe trafik për të shkarkuar imazhin e sfondit. Ekzistojnë dy lloje kryesore të gradientëve: radiale dhe lineare. Postimi i sotëm do të jetë rreth tyre.
Gradient linear
Siç thotë klasifikimi, gradientët në CSS3 janë imazhe. Nuk ka prona të veçanta për ta. Dhe për reklamën, përdoret vetia e imazhit të sfondit.
V rast i përgjithshëm sintaksa e gradientit (lineare) duket si kjo:
1 | div ( |
Pra, le të flasim për gjithçka në rregull.
Para së gjithash, gradienti linear deklarohet me funksionin linear-gradient (). Funksioni ka tre kuptime kryesore. Vlera e parë përcakton pozicioni fillestar... Shembulli specifikon krye d.m.th. pozicioni fillestar në krye. Mund të përdorni gjithashtu fund, majtas dhe djathtas;
Nëse këndi është negativ, atëherë pozicioni do të ndryshojë nga këndi i poshtëm i majtë në të majtë lart.
Vlera e dytë e funksionit është ngjyra fillestare dhe pozicioni i tij i ndalimit, i cili tregohet në përqindje. Deklarimi i këtij pozicioni është opsional, shfletuesi do t'i caktojë 0% ngjyrës së parë si parazgjedhje.
Vlera e fundit është ngjyra e dytë dhe pozicioni i saj i ndalimit. Parazgjedhja është 100%. Këto janë vlera ekstreme dhe nënkuptojnë që ngjyra e parë fillon menjëherë të kalojë në të dytën. Megjithatë, nëse vendosim 50% për ngjyrën e parë, atëherë ajo do të fillojë vetëm nga mesi i lartësisë së disponueshme në të dytën. Kështu duket kodi:
Ne marrim shirita me të njëjtën lartësi. Me një kufi të qartë, nuk do të ketë tranzicion ngjyrash. Eksperimentoni me vlerat për të kuptuar më mirë se si funksionon kjo.
Gradient radial si dhe linear deklarohet si funksion, vetëm këtë herë radial-gradient (). Ekzistojnë gjithashtu vlera themelore: kjo është forma e gradientit radial (rrethi - rrethi ose elipsi - elipsi), ngjyra e fillimit dhe e mbarimit. Sintaksa është si më poshtë:
div ( |
Nëse nuk specifikoni një formë, atëherë një elips do të vendoset si parazgjedhje.
Gjithashtu, si parazgjedhje, pozicioni qendror i gradientit është vendosur, ai mund të ndryshohet. Pozicioni mund të vendoset me komandat (lart, poshtë, majtas, djathtas dhe qendër), si dhe kombinimet e tyre, ose të specifikohet në përqindje ose piksel.
Kombinimet e komandave:
- Qendra e sipërme - lart - 50% 0%;
- Në të majtë këndi i sipërm- majtas lart - 0% 0%;
- Në këndin e sipërm të djathtë - lart djathtas — 100% 0%;
- Qendër - qendër - 50% 50%;
- Qendra e majtë - qendra e majtë - 0% 50%;
- Qendra e djathtë - qendra e djathtë - 100% 50%;
- Qendra e poshtme - fundi - 50% 100%;
- Në këndin e poshtëm të majtë - fundi i majtë - 0% 100%;
- Në këndin e poshtëm të djathtë - poshtë djathtas - 100% 100%.
Këtu është një shembull me përqindje:
div ( |
Vlera e parë përgjatë boshtit X e dyta për të Kanë.
Ju gjithashtu mund të përmasoni gradientin radial. Madhësia specifikohet me një hapësirë pas formës së gradientit. Parazgjedhja është këndi më i largët(në këndin e largët). Llogaritja kryhet nga pika qendrore e gradientit në:
Për ta kuptuar më mirë këtë, merrni parasysh një shembull. Gradient eliptik me të bardhë që fillon dhe mbaron blu:
div ( |
Madhësia llogaritet nga distanca në anët e afërta, është e qartë se pjesa e sipërme është më afër përgjatë boshtit Y dhe u largua përgjatë aksit X.
Dhe tani në anët e largëta:
div ( |
Rezultati, siç thonë në fytyrë. Madhësia llogaritet nga distanca në anët e largëta.
Në gradientin radial si dhe në gradientin linear, pozicionet e ndalimit mund të aplikohen për ngjyrën. Do të doja të theksoja gjithashtu se nëse keni nevojë të arrini transparencën e ngjyrave, atëherë duhet të përdorni rgba.
div ( |
Kanali alfa, i fundit dhe i barabartë me 0.2, tregon se vetëm 20% e ngjyrës është përdorur nga 100%.
Në të dyja format gradient CSS3 ju mund të përdorni jo dy, por disa ngjyra.
div ( |
Për të dyja pamjet, mund të përdoret përsëritja e ngjyrave. Kjo do të thotë, nga këto vlera formohet një cikël. Funksionet e gradientit të përsëritur, gradient përsëritës-linear () për gradient linear dhe përsëritës-gradient radial () për radial.
div ( |
0%, # FFAE00 100%); / * për Firefox * /
sfond-imazh: -ms-linear-gradient (lart, # FF5A00 0%, # FFAE00 100%); / * për IE 10+ * /
sfond-imazh: -o-linear-gradient (lart, # FF5A00 0%, # FFAE00 100%); / * për Opera * /
sfond-imazh: linear-gradient (lart, # FF5A00 0%, # FFAE00 100%); / * sintaksë standarde * /
}
div (
filtri: progid: DXImageTransform.Microsoft .gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
}
Ku 33 menjëherë pas grilës është përqindja e ngopjes së ngjyrave.
Shpresoj që artikulli të ishte i dobishëm për ju dhe që tema e diskutuar të zbulohet plotësisht.
Për të qëndruar të përditësuar me artikujt dhe mësimet më të fundit, abonohuni në
Të gjithë ata që mund të jenë të interesuar për CSS3 e kanë parë dhe provuar atë. Ne mund të gjenerojmë qoshe të rrumbullakosura dhe hije që bien pa shumë përpjekje.
Por ky është vetëm një nivel sipërfaqësor. Më është dashur të merrem me aftësitë e reja të shfletuesve në mënyrë më të detajuar për t'iu përgjigjur pyetjeve që lindën si: si janë gradientët ndër-shfletues me shumë kalime ngjyrash, ku dhe si mund të aplikohen disa hije në një bllok në të njëjtën kohë, për të cilat aplikohen prefikset e vetive specifike të shfletuesve, etj.
Gjithashtu, isha i interesuar për mbështetjen e CSS3 në platformat mobile, veçoritë e paeksploruara të CSS3 dhe gjeneruesit që gjenerojnë kodin e ndërthurjes së shfletuesve. Jam përpjekur të plotësoj disa boshllëqe dhe të mbledh informacione të dobishme për ata që sapo po përgatiten të zhyten.
Shfletuesit që mbështesin vetitë renditen si komente CSS. Gjeneratorët dhe veglat më së shpeshti mund të kryejnë disa funksione njëherësh, kështu që në raste të tilla unë i rendis vetëm aty ku mendoj se bëjnë më mirë.
Linear-gradient
Në fakt, ekzistojnë disa lloje të gradientëve CSS3 në të njëjtën kohë. Ky është gradienti më i thjeshtë.div (
ngjyra e sfondit: # 444444;
background-image: -webkit-gradient (lineare, majtas lart, majtas poshtë, nga (# 444444), në (# 999999)); / * Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 * /
sfond-imazh: -webkit-linear-gradient (lart, # 444444, # 999999); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
sfond-imazh: -moz-linear-gradient (lart, # 444444, # 999999); / * Firefox 3.6+ * /
sfond-imazh: -ms-linear-gradient (lart, # 444444, # 999999); / * IE 10+ * /
sfond-imazh: -o-linear-gradient (lart, # 444444, # 999999); / * Opera 11.10+ * /
sfond-imazh: linear-gradient (në fund, # 444444, # 999999);
}
Përveç specifikimit të ngjyrave fillestare dhe përfundimtare, gradientët ju lejojnë të ndryshoni këndin e prirjes, pozicionin e fillimit dhe të fundit të tranzicionit të ngjyrave, numrin e ngjyrave dhe drejtimin e gradientit.
Safari para versionit 5 dhe Chrome para versionit 10 kishin sintaksën e tyre, dhe IE 10 dhe Opera shtojnë prefikset e tyre, duke rritur sasinë e kodit.Të gjitha veçoritë e gradientit mbështeten nga shfletues që mund të japin gradient CSS3, edhe pse disa gjeneratorë na ofrojnë vetëm një kalim midis dy ngjyrave.
Repeting-linear-gradient
Ju lejon të përsërisni gradientin, ju lejon të krijoni modele sfondi.Div (
ngjyra e sfondit: # 444444;
imazh i sfondit: -webkit-repeating-linear-gradient(lart, # 444444 18%, # 999999 25%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
imazh i sfondit: -moz-përsëritje-linear-gradient(lart, # 444444 18%, # 999999 25%); / * Firefox 3.6+ * /
sfond-imazh: -ms-përsëritje-linear-gradient (lart, # 444444 18%, # 999999 25%); / * IE 10+ * /
sfond-imazh: -o-përsëritje-linear-gradient (lart, # 444444 18%, # 999999 25%); / * Opera 11.10+ * /
sfond-imazh: përsëritës-gradient linear (lart, # 444444 18%, # 999999 25%);
}
Radial-gradient
Gradient rrethor. Ju gjithashtu mund të keni disa tranzicione ngjyrash, mund të përcaktoni pikën e fillimit të gradientit (jo domosdoshmërisht nga qendra e rrethit).Div (
sfond: # 444444;
sfond: -webkit-gradient (radiale, qendër qendrore, 0px, qendër qendrore, 100%, ndalesa e ngjyrave (0%, # 444444), ndalesa e ngjyrave (100%, # 999999)); / * Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 * /
sfond: -webkit-radial-gradient (qendër, mbulesë elipsore, # 444444 0%, # 999999 100%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
sfond: -moz-radial-gradient (qendër, mbulesë elipsore, # 444444 0%, # 999999 100%); / * Firefox 3.6+ * /
sfond: -o-radial-gradient (qendër, mbulesë elipse, # 444444 0%, # 999999 100%); / * Opera 11.6+ * /
sfond: -ms-radial-gradient (qendër, mbulesë elipsore, # 444444 0%, # 999999 100%); / * IE 10+ * /
sfond: radial-gradient (qendër, mbulesë elipse, # 444444 0%, # 999999 100%);
}
Opera nuk mbështeti gradientët rrethore deri në versionin 11.6. Pjesa tjetër e situatës është e njëjtë si me gradientin linear.
Mjetet:
- gradients.glrzad.com prodhon kodin ndër-shfletues, mund të krijohen shumë tranzicione ngjyrash
- www.colorzilla.com/gradient-editor gjeneratori më i sofistikuar. Mund të krijoni gradientë linearë dhe rrethorë, ekziston një zgjedhje e formatit për regjistrimin e ngjyrave, shumë gradientë të gatshëm.
- lea.verou.me/css3patterns galeria e modeleve CSS3. Ju mund të shihni kodin për çdo model.
Prejardhje të shumta
Kjo është aftësia për të caktuar disa imazhet e sfondit një artikull.div (
sfond: url (fallback.png) pa përsëritje 0 0;
sfond: url (foreground.png) pa përsëritje 0 0, url (middle-ground.png) pa përsëritje 0 0, url (background.png) pa përsëritje 0 0; / * Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ * /
}
Mos harroni për shfletuesit që nuk mbështesin sfonde të shumta.Rendi i sfondeve është si më poshtë: nga lart poshtë, domethënë, sfondi më i poshtëm duhet të shkruhet në fund. Në vend të fotot e sfondit mund të shkruani edhe gradientë CSS3.
Kufi-rrezja
Qoshe të rrumbullakosura në bllok. Është e thjeshtë nëse keni nevojë për të njëjtën rreze lakimi.Div (
-webkit-border-radius: 12px; / * Safari 3-4, iOS 1-3.2, Android ≤1.6 * /
-moz-border-radius: 12px; / * Firefox 1-3.6 * /
kufiri-radius: 12px; / * Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ * /
}
Të gjithë prodhuesit kanë braktisur tashmë prefikset e shitësve versionet e fundit shfletuesit.
Por nëse qoshet e ndryshme duhet të kenë rreze të ndryshme, atëherë duhet të listoni rrezet për çdo cep.
Firefox-i ka një veçori që këndet numërohen duke përdorur një sintaksë të ndryshme nga standardi. Por zgjidhja mund të jetë përdorimi i një sintakse stenografike, e cila është e njëjtë në të gjithë shfletuesit.
div (
-moz-border-radius: 15px 30px 45px 60px;
-webkit-border-radius: 15px 30px 45px 60px;
kufiri-radius: 15px 30px 45px 60px;
}
Një tipar interesant është transmetimi i çifteve të vlerave të rrezes për çdo cep. Kështu që ju mund të arrini më shumë forma komplekse sesa thjesht rrumbullakime:
Div (
kufiri-lart-majtë-rrezja: 5px 30px;
kufiri-lart-djathtas-rreze: 30px 60px;
kufiri-poshtë-majtas-rreze: 80px 40px;
kufiri-poshtë-djathtas-rreze: 40px 100px;
}
Nëse të gjithë janë të njëjtë:
Div (
kufiri-radius: 8px / 13px;
}
Mjetet:
Upd Për ata që duan të automatizojnë procesin e krijimit të prefikseve është shkruar.
