01-ից 04-ը
Ստեղծեք Cross-Browser Linear Gradients- ը CSS3- ով
Գծային գրադիենտներ
Գրաֆիկի ամենատարածված տեսակը դուք կտեսնեք երկու գույնի գծային գրադիենտ: Սա նշանակում է, որ գրադիենը ուղիղ գիծ է անցնում աստիճանաբար փոխելով առաջին գույնից երկրորդը այդ գծի վրա: Այս էջի պատկերը ցույց է տալիս # 999 (մուգ մոխրագույն) ձախ ուղղանկյան գրադիենտ #fff (սպիտակ):
Գծային գրադիենտները ամենաարդյունավետն են սահմանում եւ ունեն ամենալավ աջակցությունը բրաուզերում: CSS3 գծային գրադիենտներին աջակցում են Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ եւ Safari 4+: Internet Explorer- ը կարող է ավելացնել գրադիենտներ, օգտագործելով զտիչ եւ աջակցում է դրանք դեպի IE 5.5: Սա CSS3 չէ, բայց դա խաչաձեւ բրաուզերի համատեղելիության տարբերակ է:
Երբ դուք սահմանում եք գրադիենտ, դուք պետք է որոշեք մի քանի տարբեր բաներ.
- Ինչպիսի գրադիենտ է դա գծային կամ ճառագայթային
- Որտեղ գրադիենը պետք է սկսվի
- Որտեղ գրադիենտը պետք է դադարեցվի
- Ինչ գույներն են գրադիենտում եւ որտեղ նրանք պետք է սկսեն եւ դադարեն
CSS3- ի միջոցով գծային գրաֆիկները սահմանելու համար գրեք `
գծային-գրադիենտ ( անկյուն կամ կողմ կամ անկյուն , գույնի դադար , գունավոր կանգառ )
- Նախ, դուք սահմանում եք գրաֆիկական տեսակի անունը գծային- հրամանատարի հետ:
- Այնուհետեւ, դուք սահմանում եք կուրսի մեկնարկը եւ կանգառ կետերը երկու եղանակներից մեկում. Գծի անկյունը 0-ից մինչեւ 359 աստիճան, իսկ 0 աստիճանով, դեպի ուղղություն: Կամ `« կողմի կամ անկյունի »գործառույթով, ինչպես ձախ, աջ, ներքեւ եւ վերեւ: Դրանք կներկայացվեն ավելի մանրամասն, հաջորդ էջում: Եթե դուրս եք գալիս, ապա գրադիենը հոսում է վերեւից մինչեւ տարրերի ներքեւը:
- Ապա դուք սահմանում եք գունային դադարները: Դուք սահմանում եք գույնի դադարները գունային կոդով եւ ընտրովի տոկոսով: Տոկոսը նշում է զննարկիչը, որտեղ գիծում սկսելու կամ ավարտելու գծում: Լռելյայն է, գույնը տեղավորել գիծում: Դուք կարող եք ավելին իմանալ գունային դադարների մասին, էջ 3-ում:
Այսպիսով, CSS3- ի հետ վերը նշված գրաֆիկը որոշելու համար գրեք `
գծային-գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
Եվ այն դնելու համար, որպես DIV- ի ֆոն, դուք գրում եք.
div {
background-image: գծային-գրադիենտ (ձախ, # 999999 0%, #ffffff 100%;
}
Browser Extensions համար CSS3 Linear Gradients
Ձեր գրադիենտը խաչաձեւ բրաուզեր գործելու համար անհրաժեշտ է օգտագործել զննարկիչի ընդարձակման տարբերակներ բրաուզերների եւ զտիչի համար Internet Explorer 9 եւ ավելի ցածր (իրականում 2 զտիչ): Բոլորն էլ նույն տարրերն են, որպեսզի որոշեն ձեր գրադիենտը (բացառությամբ, որ դուք կարող եք սահմանել միայն 2 գունավոր գրադիենտներ IE- ում):
Microsoft- ի զտիչները եւ ընդլայնումը -Internet Explorer- ը առավել դժվար է աջակցել, քանի որ տարբեր բրաուզերների տարբերակների համար անհրաժեշտ է երեք տարբեր տող: Ստորեւ մոխրագույնը սպիտակ գրադիենտ ստանալու համար գրեք.
/ * IE 5.5-7 * /
ֆիլտր: նախորդ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms- ֆիլտր: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (ձախ, # 999999 0%, #ffffff 100%);
Mozilla Extension- The -moz- ընդլայնումը աշխատում է CSS3- ի գույքի հետ, ընդ որում `-Moz- ընդլայնումը: Firefox- ի վերեւում գրադիենտ ստանալու համար գրեք `
-մազ գծային-գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
Օպերայի ընդլայնումը -The -o- ընդլայնումը ավելացնում է գրադիենտներ Opera 11.1+: Ստանալու համար գրադիենտ, գրեք `
-o-linear- գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
Webkit ընդլայնում -The -webkit-extension- ը շատ նման է CSS3- ի գույքին: Սաֆարի 5.1+ կամ Chrome 10+- ի վերը նշված գրադի համար սահմանելու համար գրեք.
-webkit-linear-gradient (ձախ, # 999999 0%, #ffffff 100%);
Կա նաեւ Webkit հավելվածի հին տարբերակը, որը աշխատում է Chrome 2+ եւ Safari 4+- ի հետ: Դրա համար սահմանում եք գրադիենտի տեսակը որպես արժեք, այլ ոչ թե սեփականության անվան: Այս ընդարձակման հետ մոխրագույն սպիտակ գրահանին ստանալու համար գրեք `
-վեբիտ-գրադիենտ (գծային, ձախ վերեւ, աջ վերեւ, գունավոր կանգառ (0%, # 999999), գունավոր կանգառ (100%, # ffffff));
CSS3 գծային գրադիենտ ամբողջ CSS կոդը
Խաչաձեւ բրաուզերի աջակցության համար գորշ գույնի վերին գրաֆիկի հասնելու համար նախ պետք է ներգրավեք բրաուզերների համար, որոնք չեն աջակցում գրադիենտներին, իսկ վերջին նյութը պետք է լինի CSS3- ի ոճը, որը լիովին համապատասխանում է բրաուզերներին: Այսպիսով, դուք գրում եք.
ֆոնային: # 999999;
background: -moz-linear- գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (գծային, ձախ վերեւ, աջ վերեւ, գունավոր կանգառ (0%, # 999999), գունավոր կանգառ (100%, # ffffff));
background: -webkit-linear-gradient (ձախ, # 999999 0%, #ffffff 100%);
background: -o-linear- գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (ձախ, # 999999 0%, #ffffff 100%);
ֆիլտր: նախորդ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: prod.: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: գծային-գրադիենտ (ձախ, # 999999 0%, #ffffff 100%);
Այս ձեռնարկի հաջորդ էջերը բացատրում են հատվածի մասերը ավելի մանրամասն, եւ վերջին էջը նշում է ձեզ մի գործիք, որը ավտոմատ կերպով ստեղծելու է CSS3- ի գրադիենտներ:
Տեսեք այս գծային գրադիենտը գործող CSS- ի միջոցով:
02-ից 04-ը
Ստեղծելով խաչաձեւ գրադիենտներ `կաղապարի անկյուն
Սկսնակ եւ կանգառ կետերը որոշում են գրադիենտի անկյունը: Առավել գծային գրադիենտներ վերեւից ներքեւ կամ ձախից աջ են: Սակայն հնարավոր է կառուցել գրադիենտ, որը շարժվում է անկյունագծային գծում: Այս էջի պատկերը ցույց է տալիս մի պարզ գրաֆիկ, որը շարժվում է աջից դեպի ձախ պատկերով 45 րոպե անկյունում:
Անկյունները պարզելու են գրադիենտ գծերը
Անկյունը տարրերի կենտրոնում պատկերված շրջագծի գծ է: 0deg միավորները, 90deg կետերը աջ, 180deg կետերը ներքեւ եւ 270deg կետերը ձախ կողմում: Դուք կարող եք սահմանել ցանկացած անկյուն 0-ից մինչեւ 359 աստիճան:
Պետք է նշել, որ հրապարակում 45 աստիճանի անկյունը շարժվում է վերին ձախ անկյունից մինչեւ ներքեւի աջ, բայց ուղղանկյան մեջ սկիզբը եւ վերջը միավորները մի փոքր հեռու են ձեւից դուրս, ինչպես պատկերով տեսաք:
Շեղանկյուն գրադիացիայի առավել տարածված ձեւը սահմանում է անկյուն, ինչպես, օրինակ, վերեւի աջը եւ գրադիենը այդ անկյունից տեղափոխվելու է հակառակ անկյուն: Դուք կարող եք սահմանել մեկնարկային կետը հետեւյալ հիմնաբառերով.
- գագաթ
- ճիշտ
- ներքեւի մասում
- ձախ
- կենտրոն
Եվ դրանք կարող են համակցվել ավելի կոնկրետ, ինչպես օրինակ `
- վերեւի աջ
- վերեւի ձախ
- վերեւի կենտրոն
- ներքեւի աջ
- ներքեւի ձախ կողմում
- ներքեւի կենտրոնում
- աջ կենտրոն
- ձախ կենտրոն
Ահա CSS- ն, որը պատկերված է գրադիենտի նման, վերեւի աջ անկյունից մինչեւ ներքեւի ձախից կարմիր դեպի սպիտակ:
background: ## 901A1C;
background-image: -moz-linear-gradient (աջ վերեւում, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (գծային, աջ վերեւ, ձախ ներքեւ, գունավոր կանգառ (0, # 901A1C), գունավոր կանգառ (1, #FFFFFF));
background: -webkit-linear-gradient (աջ վերեւում, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (աջ վերեւում, # 901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient (աջ վերեւում, # 901A1C 0%, #ffffff 100%);
background: գծային-գրադիենտ (աջ վերեւում, # 901A1C 0%, #ffffff 100%);
Կարող եք նկատել, որ այս օրինակում IE- ի զտիչներ չկան: Դա այն է, որ IE- ն թույլ է տալիս միայն երկու տեսակի ֆիլտրեր `վերեւից ներքեւ (կանխադրված) եւ ձախից աջ (GradientType = 1 անջատիչով):
Տեսեք այս խաչաձեւ գծային գրադիենտը գործող CSS- ի միջոցով:
03-ից 04-ը
Գույնը դադարում է
CSS3 գծային գրադիենտներով, դուք կարող եք ավելացնել մի քանի գույներ ձեր գրադիենտ ստեղծել նույնիսկ fancier էֆեկտներ. Այս գույները ավելացնելու համար դուք ավելացնում եք ձեր գույքի վերջում լրացուցիչ գույներ, առանձնացված ստորակետներով: Դուք պետք է ներառեք, թե որտեղ գիծը պետք է սկսվի կամ ավարտվի:
Internet Explorer ֆիլտրերը միայն աջակցում են երկու գունավոր կանգառներ, այնպես որ, երբ դուք ստեղծեք այս գրադիենտը, դուք պետք է ընդգրկեք միայն առաջին եւ երկրորդ գույները, որոնք ցանկանում եք ցուցադրել:
Ստորեւ բերված 3 գունավոր գրադի համար CSS- ն է.
background: #ffffff;
background: -moz-linear-gradient (ձախ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (գծային, ձախ վերեւ, աջ վերեւ, գունավոր կանգառ (0%, # ffffff), գունավոր կանգ (51%, # 901A1C), գունավոր կանգ (100%, # ffffff));
background: -webkit-linear- գրադիենտ (ձախ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear- գրադիենտ (ձախ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -ms-linear-gradient (ձախ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ֆիլտր: նախորդ: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: գծային-գրադիենտ (ձախ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Տեսեք այս գծային գրադիենտը երեք գունավոր դադարով գործողությամբ, օգտագործելով պարզապես CSS:
04-ից 04-ը
Կառույցի գրադիենտները հեշտացրեք
Գոյություն ունեն երկու կայքեր, որոնք խորհուրդ են տալիս օգնել ձեզ կառուցել գրադիենտներ, նրանցից յուրաքանչյուրն ունենա օգուտներ եւ թերություններ, ես չեմ գտել գրադիենտ շինարար, որն ամեն ինչ անում է:
Վերջնական CSS- ի գրադիենտ գեներատոր
Այս գրադիենտ գեներատորը շատ տարածված է, քանի որ այն կատարում է նույն ձեւով գրադիենտ կառուցողներին Photoshop- ի նման ծրագրերում: Ինձ դուր է գալիս նաեւ այն պատճառով, որ այն ձեզ տալիս է CSS ընդարձակման բոլոր տարբերակները, ոչ միայն Webkit եւ Mozilla: Գեներատորի հետ խնդիրն այն է, որ այն միայն հորիզոնական եւ ուղղահայաց գրադիենտներին է աջակցում: Եթե ուզում ես անել շեղակի գրադիենտներ, ես պետք է գնամ մյուս գեներատորին:
CSS3 գրադիենտ գեներատոր
Այս գեներատորը ինձ մի փոքր ավելի երկար էր հասկանում, քան առաջինը, բայց դա աջակցում է փոխել ուղղությունը դեպի անկյունագիծ:
Եթե դուք գիտեք այլ CSS Gradient Generator- ի մասին, որը ձեզ դուր է գալիս ավելի լավը, խնդրում ենք տեղեկացնել մեզ :