01 no 04
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 tos atbalsta atpakaļ 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ārs vai radiā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 sāns vai stūra , krāsu apstādināšana , krāsu apstādināšana )
- Vispirms jūs definējat gradienta veidu ar nosaukumu linear- gradient.
- Tad jūs definējat gradienta sākuma un beigu punktus vienā no diviem veidiem: līnijas leņķis grādos no 0 līdz 359, ar 0 grādiem uz augšu. Vai ar "sānu vai stūra" funkciju, piemēram, kreiso, labo, apakšējo un augšējo. 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, lai to iestatītu kā DIV fona, jūs rakstiet:
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ā, visbiežāk pārlūkprogrammām jāizmanto pārlūkprogrammas paplašinājumi un pārlūkprogrammai Internet Explorer 9 un zemāk (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 dažādu pārlūkprogrammu versiju atbalstīšanai. 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 Extension -The -moz paplašinājums darbojas tāpat kā CSS3 īpašums, tikai ar -moz-paplašinājumu. Lai iegūtu iepriekš minēto gradientu Firefox, rakstīt:
-moz lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Opera paplašinājums - paplašinājums -O-extension paplašina slīpumu operai 11.1+. Lai iegūtu augšminēto gradientu, rakstiet:
-no lineārais gradients (pa kreisi, # 999999 0%, #ffffff 100%);
Webkit paplašinājums -The -webkit-paplašinājums darbojas ļoti līdzīgi 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 04
Diagonā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 punktus, 90deg punktus pa labi, 180deg punktus uz leju un 270deg punktus pa kreisi. 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 sastopamais diagonāles gradienta noteikšanas veids ir definēt stūri, piemēram, augšējā labajā stūrī, 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 labās uz kreiso (ar GradientType = 1 slēdzi).
Skatiet šo diagonālo lineāro gradientu darbībā, izmantojot tikai CSS.
03 no 04
Krā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 04
Veiciet ē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 .