CSS3 lineārie gradienti [CSS3 padomi]
Gradients ir lielisks krāsu funkciju papildinājums CSS3. Tā vietā, lai pievienotu tikai vienu krāsu, vienā deklarācijas blokā tagad varam pievienot vairākas krāsu kombinācijas, nepaļaujot uz attēliem, kas varētu samazināt HTTP pieprasījumu mūsu tīmekļa vietnē, ļaujot vietnei ielādēt ātrāk.
Ja esat spēlējis apkārt ar gradientiem CSS3, jūs, iespējams, esat iepazinušies ar abām metodēm: radiālo un lineāro gradientu. Šodienas amats būs par pēdējo.
Gradientu izveide
Tā kā specifikācijas CSS3 gradienti ir attēls, tam nav īpašas īpašības, piemēram, citas jaunas funkcijas papildināšanas, tāpēc tas tiek deklarēts, izmantojot fona attēls vietā.
Ja mēs apskatīsim pilnu gradienta sintaksi, tas izskatās nedaudz overstuffed, kas varētu radīt neskaidrības dažiem cilvēkiem.
div fona attēls: -webkit-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -moz-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -ms-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -o-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%);
Tāpēc, lai padarītu lietas skaidrākas, ielieciet katru sintakses daļu.
Pirmkārt, ar lineāro gradientu tiek deklarēts lineārs gradients () funkciju. Funkcijai ir trīs galvenās vērtības. Pirmā vērtība nosaka gradienta sākuma pozīciju. Jūs varat izmantot aprakstošu atslēgvārdu, piemēram, tops lai sāktu gradientu, kas plūst no tops;
div fona attēls: lineārs gradients (augšā, # FF5A00, # FFAE00);
Iepriekš minētais fragments ir oficiālā versija no W3C, lai izveidotu gradientus. Tas ir tiešām vienkāršāks un diezgan pašsaprotams, un tas arī radīs šādu gradientu.
Varat arī izmantot apakšā darīt pretējo vai citādi pa labi un pa kreisi.
Mēs varam izveidot arī diagonālo gradientu, izmantojot leņķa pakāpe kā gradienta sākuma pozīcija. Šeit ir piemērs:
div fona attēls: lineārā gradienta (45deg, # FF5A00, # FFAE00);
Iepriekš minētais fragments radīs šādu krāsu gradientu:
Funkcijas otrā vērtība pateiks pirmā krāsa informāciju un tās apstāšanās pozīcija kas ir norādīts procentos. Pietura pozīcija faktiski nav obligāta; pārlūkprogramma ir pietiekami gudra, lai noteiktu pareizo pozīciju, tāpēc, kad nenorādām pirmās krāsas apstāšanos, pārlūks to veiks 0% kā noklusējuma.
Un nākamā vērtība ir otrā krāsa kombināciju. Tas darbojas tāpat kā iepriekšējā vērtība, tikai tad, ja tā ir pēdējā lietotā krāsa, un mēs to nenorādām apstāšanās pozīcija, vērtība ir 100% tiks uzskatīts par noklusējumu. Tagad aplūkosim zemāk redzamo piemēru:
div fona attēls: lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%);
Iepriekš minētais fragments radīs tādu gradientu kā tas, ko mēs redzējām agrāk (bez atšķirībām), bet tagad mēs precizējam krāsu apstāšanās pozīciju;
Tagad mainīsim krāsu apstāšanās, un šoreiz mēs precizēsim 50% par pirmo krāsu un 51% par otro krāsu un redzēsim, kā tas izrādīsies;
div fona attēls: lineārs gradients (augšā, # FF5A00 50%, # FFAE00 51%);
Pārredzamība
Radīt pārredzamību arī gradientā. Lai radītu efektu, mums ir jāpārvērš krāsa hex vērā rgba režīmā un pazeminiet alfa kanālu.
div fona attēls: lineārais gradients (augšā, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Iepriekš minētais fragments samazinās krāsu intensitāti līdz 20%, un slīpums būs šāds:
Vairākas krāsas
Ja vēlaties pievienot vairāk krāsu, vienkārši pievienojiet blakus esošās krāsas ar komatu atdalītāju un ļaujiet pārlūkam noteikt katras krāsas apstāšanās pozīciju.
div fona attēls: lineārais gradients (tops, sarkans, oranžs, dzeltens, zaļš, zils, indigo, violets);
Iepriekš minētais fragments radīs šādu varavīksni.
Pārlūka saderība
Diemžēl šī rakstīšanas laikā visām pašreizējām pārlūkprogrammām vēl jāatbalsta standarta sintakse. Viņiem joprojām ir vajadzīgs pārdevēja prefikss (-webkit-, -moz-, -jaunkundze- un -o-). Tātad, tāpēc pilnīgā sintakse parādās šādi:
div fona attēls: -webkit-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -moz-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -ms-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: -o-lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%); fona attēls: lineārs gradients (augšā, # FF5A00 0%, # FFAE00 100%);
No otras puses, Internet Explorer, īpaši 9. versija un zemāka, ir tālu no standarta. Slīpums iekšā IE9 un zemāk tiek deklarēts filtru, tādēļ, ja mēs vēlamies pievienot gradientu uz šīm pārlūkprogrammām, mums ir jāraksta kaut kas līdzīgs šim;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The filtru ir ierobežojumi: pirmkārt, tas neļauj pievienot vairāk nekā trīs krāsas, un pārredzamības efekta radīšana ir arī nedaudz sarežģīta - tas neļauj rgba, bet IE filtru izmanto #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Šeit ir rīks, kas palīdzēs jums konvertēt rgba uz #ARGB.
- Demo
- Lejupielādēt avotu
Sintakses ātrāka rakstīšana
Kā redzams iepriekš, lai saglabātu gradientu saderību pārlūkprogrammās, mums ir jāpievieno vēl piecas kodu rindas, kas ir neefektīvas.
Ir daudz veidu, kā mēs varam darīt, lai vienkāršotu uzdevumu; piemēram, bez Prefikss, Prefikss, LESS vai Sass, lai palīdzētu apkopot kodus, bet galvenais, mēs iesakām izmantot šo rīku, ColorZilla Gradient. Šis rīks vienkārši ģenerēs visus nepieciešamos kodus, lai gradienti darbotos visās pārlūkprogrammās.
Galīgie vārdi
Šodien mēs esam daudz runājuši par gradientu radīšanu, mēs esam izpētījuši katru sintakses daļu, radot pārredzamus efektus un saglabājot pārlūkprogrammas saderību. Tātad, šajā brīdī mēs ceram, ka jums jau ir labāka izpratne par šo tēmu.
Ir vēl daudzas lietas, kuras mēs plānojam izpētīt CSS3 gradienti mūsu turpmākajos amatos, tāpēc palieciet melodiju uz Hongkiat.com. Visbeidzot, paldies, ka lasījāt šo ziņu, mēs ceram, ka jums tas patika.
Turpmāka lasīšana
- Bullet Proof Cross Browser RGBA foni - Lea Verou
- CSS3 attēls - W3.org
- Kad es varu izmantot CSS3 Gradients - CanIUse.com
