Cross-Browser Linear Gradient izveide ar CSS3
Lineārie slīpumi
Visbiežāk redzamais gradienta veids ir divu krāsu lineārais gradients. Tas nozīmē, ka gradients virzīsies taisni, pakāpeniski mainoties no pirmās krāsas uz otru pa šo līniju. Attēls šajā lapā rāda vienkāršu kreisās un labās puses gradientu # 999 (tumši pelēks) uz #fff (balts).
Lineārie slīpumi visvieglāk ir definēti, un pārlūkprogrammās to visvairāk atbalsta. CSS3 lineārie gradienti tiek atbalstīti operētājsistēmā Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ un Safari 4+. Internet Explorer var pievienot slīpumus, izmantojot filtru un atbalsta tos atpakaļ uz IE 5.5. Šis nav CSS3, bet tas ir risinājums pārrobežu pārlūku saderībai.
Kad jūs definējat gradientu, jums ir jādefinē vairākas atšķirīgas lietas:
- Kāda veida gradients tas ir -
lineārsvairadiālais - Kur jāpāriet gradientam
- Ja gradients ir jāpārtrauc
- Kādas krāsas ir gradientā un kur tām jāsāk un jāpārtrauc
Lai noteiktu lineāros gradientus, izmantojot CSS3, rakstāt:
lineārais gradients (leņķis vai pusē vai stūrī, krāsu apstāšanās, krāsu apstāšanās)
- Vispirms jūs definējat gradienta veidu ar nosaukumu
lineārs -gradientu. - Tad jūs definējat gradienta sākuma un beigu punktus vienā no diviem veidiem:
leņķisno līnijas grādos no 0 līdz 359, ar 0 grādiem uz augšu. Vai arī ar "sānu vai stūra" funkciju, piemēram,pa kreisi,pa labi,apakšā, untops. Tie tiks paskaidroti sīkāk nākamajā lapā. Ja jūs to atstājat, gradients no elementa augšas līdz apakšai plūsmā. - Tad jūs definējat krāsu apstājas. Jūs definējat krāsu apstājas, izmantojot krāsu kodu un izvēles procentus. Procentuālā vērtība norāda pārlūkprogrammai, kur līnija sākas vai beidzas ar šo krāsu. Pēc noklusējuma krāsas vienmērīgi novieto gar līniju. Jūs uzzināsit vairāk par krāsu apstādījumiem 3. lappusē.
Tātad, lai noteiktu iepriekš minēto gradientu ar CSS3, rakstāt:
lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Un noteikt to kā fona a DIV tu raksti:
div {fona attēls: lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%;} CSS3 lineāro slīpumu pārlūka paplašinājumi
Lai jūsu gradients darbotos pārrobežu pārlūkprogrammā, lielākajai daļai pārlūkprogrammu ir jāizmanto pārlūka paplašinājumi un a filtru Internet Explorer 9 un jaunākiem (faktiski 2 filtri). Visi šie elementi nosaka vienādus elementus, lai noteiktu jūsu gradientu (izņemot to, ka IE var definēt tikai 2 krāsu gradientus).
Microsoft filtri un paplašinājums-Internet Explorer ir visgrūtākais atbalsts, jo jums ir nepieciešamas trīs dažādas līnijas, lai atbalstītu dažādas pārlūkprogrammas versijas. Lai iegūtu augstāk pelēko balto gradientu, jūs rakstītu:
/ * IE 5.5-7 * /filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filtrs: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Mozilla paplašinājums-The -moz- paplašinājums darbojas tāpat kā CSS3 īpašums, tikai ar -moz- pagarinājums Lai iegūtu iepriekš minēto gradientu Firefox, rakstīt:
-moz lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Operas pagarināšana-The -O paplašinājums papildina slīpumus operai 11.1+. Lai iegūtu augšminēto gradientu, rakstiet:
-no lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Webkit pagarinājums-The -webkit- pagarinājums ir ļoti līdzīgs CSS3 īpašumam. Lai definētu augstāk minēto gradientu Safari 5.1+ vai Chrome 10+, jūs rakstiet:
-webkit-linear-gradient (pa kreisi, # 999999 0%, #ffffff 100%);
Ir arī vecāka Webkit paplašinājuma versija, kas darbojas ar Chrome 2+ un Safari 4+. Tajā jūs definējat gradienta veidu kā vērtību, nevis īpašuma nosaukumu. Lai iegūtu pelēko-balto gradientu ar šo paplašinājumu, rakstiet:
-webkit-gradients (lineārs, kreisais top, labais augšējais, krāsainais stop (0%, # 999999), krāsu apstādināšana (100%, # ffffff)); Pilns CSS3 lineārā gradienta CSS kods
Pilnīgam pārrobežu pārlūku atbalstam, lai iegūtu augšējo pelēko balto slīpumu, vispirms vispirms jāiekļauj aizmugures krāsa pārlūkprogrammām, kas neatbalsta slīpumus, un pēdējam objektam jābūt CSS3 stilam pārlūkprogrammām, kas pilnībā atbilst prasībām. Tātad jūs rakstāt:
fons: # 999999;fons: -moz-linear-gradients (pa kreisi, # 999999 0%, #ffffff 100%);fons: -webkit-gradients (lineārs, kreisais augšējais, labais augšējais, krāsu pieturas (0%, # 999999), krāsu pieturas (100%, # ffffff));fons: -webkit-linear-gradients (pa kreisi, # 999999 0%, #ffffff 100%);fons: -no lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);fons: -ms-linear-gradients (pa kreisi, # 999999 0%, #ffffff 100%);filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);fons: lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Nākamās šīs apmācības lapas detalizētāk izskaidro gradienta daļas, un pēdējā lappusē tiek rādīts instruments, kas ir lielisks veids, kā automātiski izveidot CSS3 slīpumu.
Skatiet šo lineāro gradientu darbībā, izmantojot tikai CSS.
02 no 04Diagonālo slīpumu veidošana - gradienta leņķis
Sākuma un apstāšanās punkti nosaka slīpuma leņķi. Lielākā daļa lineāro slīpumu ir no augšas uz leju vai pa kreisi uz labo pusi. Bet ir iespējams veidot gradientu, kas pārvietojas pa diagonāli. Attēls šajā lapā parāda vienkāršu gradientu, kas pārvietojas 45 ° leņķī pa attēlu no labās uz kreiso pusi.
Leņķi, lai noteiktu gradienta līniju
Leņķis ir līnija uz iedomātā apļa elementa centrā. 0deg norāda uz 90deg norāda uz labo 180deg norāda uz leju un 270deg norāda uz kreiso pusi. Jūs varat definēt jebkuru leņķi no 0 līdz 359 grādiem.
Jāatzīmē, ka kvadrātā 45 grādu leņķis pārvietojas no augšējā kreisā stūra uz labo pusi apakšējā labajā pusē, bet taisnstūrī sākuma un beigu punkti ir nedaudz ārpus formas, kā redzat attēlā.
Biežāk definēts diagonālais gradients ir stūra, piemēram, labais labais un slīpums pārvietosies no šī stūra uz pretējo stūri. Jūs varat definēt sākuma stāvokli ar šādiem atslēgvārdiem:
- tops
- pa labi
- apakšā
- pa kreisi
- centrā
Un tos var kombinēt konkrētāk, piemēram:
- labais labais
- augšējais kreisais
- augšējais centrs
- apakšējā labajā stūrī
- apakšā pa kreisi
- apakšējais centrs
- labais centrs
- kreisajā centrā
Šeit ir CSS attiecībā uz gradientu, kas līdzīgs attēlam, no sarkan-balta pārvietojas no augšējā labā stūra uz kreiso pusi:
fons: ## 901A1C;fona attēls: -moz lineārais gradients (augšējā labā, # 901A1C 0%, # FFFFFF 100%);fona-attēls: -webkit-gradients (lineārs, labais augšējais, kreisais apakšējais, krāsu stop (0, # 901A1C), krāsu apstādināšana (1, #FFFFFF));fons: -webkit-linear-gradients (augšējā labā, # 901A1C 0%, #ffffff 100%);fons: -no lineārais gradients (augšējā labā, # 901A1C 0%, #ffffff 100%);fons: -ms-lineārais gradients (labais top, # 901A1C 0%, #ffffff 100%);fons: lineārais gradients (labais top, # 901A1C 0%, #ffffff 100%);
Iespējams, pamanījāt, ka šajā piemērā nav IE filtru. Tas ir tādēļ, ka IE pieļauj tikai divu veidu filtrus: no augšas uz leju (pēc noklusējuma) un no kreisās uz labo (ar GradientType = 1 slēdzis).
Skatiet šo diagonālo lineāro gradientu darbībā, izmantojot tikai CSS.
03 no 04Krāsa apstājas
Izmantojot CSS3 lineārus gradientus, varat pievienot vairākas krāsas savam gradientam, lai radītu vēl patīkamus efektus. Lai pievienotu šīs krāsas, pievienojiet papildu krāsas savam īpašumam, atdalot ar komatu. Jums vajadzētu iekļaut, kur uz līnijas krāsas ir jāsākas vai beigas arī.
Internet Explorer filtri atbalsta tikai divu krāsu apstājas, tādēļ, veidojot šo gradientu, jāiekļauj tikai pirmās un otrās krāsas, kuras vēlaties parādīt.
Šeit ir CSS par iepriekš minēto 3 krāsu gradientu:
fons: #ffffff;fons: -moz lineārais gradients (pa kreisi, #ffffff 0%, # 901A1C 51%, #ffffff 100%);fons: -webkit-gradients (lineārs, kreisais top, labais augšējais, krāsu pieturas (0%, # ffffff), krāsu apstādināšana (51%, # 901A1C), krāsu apstādināšana (100%, # ffffff));fons: -webkit-linear-gradients (pa kreisi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fons: -no lineārais gradients (pa kreisi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fons: -ms-linear-gradients (pa kreisi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);fons: lineārais gradients (pa kreisi, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Skatiet šo lineāro gradientu, izmantojot trīs krāsu apstājienus, izmantojot tikai CSS.
04 no 04Veiciet ēkas gradienti
Es ieteiktu izmantot divas vietnes, lai palīdzētu jums veidot slīpumus, viņiem katram ir priekšrocības un trūkumi, es neesmu atradis gradientu celtnieku, kas visu vēl dara.
Ultimate CSS gradienta ģeneratorsŠis gradienta ģenerators ir ļoti populārs, jo tas darbojas līdzīgi gradienta veidotājiem programmās, piemēram, Photoshop. Man arī tas patīk, jo tas sniedz jums visus CSS paplašinājumus, nevis tikai Webkit un Mozilla. Problēma ar šo ģeneratoru ir tā, ka tā atbalsta tikai horizontālos un vertikālos gradientus. Ja vēlaties veikt diagonālās slīpnes, jums jāiet uz citu ģeneratoru, kuru es ieteiktu. CSS3 gradienta ģeneratorsŠis ģenerators pagāja man mazliet ilgāk, lai saprastu, nekā pirmais, bet tas atbalsta mainīt virzienu uz diagonāli. Ja jūs zināt citu CSS gradienta ģeneratoru, kas jums patīk labāk nekā šie, lūdzu, dodiet mums to zināmu.
