Бо CSS ва jQuery ритми амудиро нигоҳ доред

Мундариҷа

• Гузоштани намуди
• Ритми амудӣ
• Гузаронидани ритм
• Муомила бо тасвирҳо
• Такмили jQuery
• Хулоса

• Дониш лозим аст: CSS, jQuery асосӣ
• Талаб мекунад: jQuery, CSS, HTML
• Вақти лоиҳа: Дақиқаи 30
• Файлҳои манбаъро зеркашӣ кунед

Фарз мекунем, ки шумо аз мундариҷа тарроҳӣ мекунед, аввалин тасмим дар бораи тарроҳии шумо дорад бо навъи алоқаманд будан. Ҳатто аз ҷониби не интихоби намуди ҳарфе, ки шумо коре кардаед, ки ба сайти шумо таъсир мерасонад. Намуди аслӣ барои чоп ва тарроҳии веб аст ва он мураккаб аст; бисёр истилоҳҳо, таҷрибаҳо, қоидаҳо ва усулҳои ҷамъшуда мавҷуданд, ки ба истифодаи хуби он мераванд. Ин мақола ба як усули идоракунии як ҷанбаи намуд дахл дорад, ки дар интернет кор кардан душвор буд, аммо дар шакли чопӣ мунтазам аст: нигоҳ доштани ритми амудии амудӣ, ки дар навбати худ ба мо имкон медиҳад, ки тарҳбандии касбиро ба даст орем.

Гузоштани намуди

Дар шакли чопӣ, барои ҳар як ашё, ки миқдори зиёди матн дорад, таҳкурсии тарҳ эҳтимолан шабакаи ибтидоӣ хоҳад буд. Он барои ба саҳифа овардани сохтор истифода мешавад ва ҷараёни амудии мундариҷаро ҳидоят мекунад. Қариб ҳама чиз нисбат ба он шабакаи ибтидоӣ ҷойгир карда шудааст. Агар шумо шартҳоро эътироф накунед, хавотир нашавед, ҳеҷ кас бо заминаи асосӣ ё шабакаҳои ибтидоӣ шинос нест; шумо аллакай дар бораи онҳо медонед. Ба мактаб баргардед, вақте ки шумо, бешубҳа, дар коғази хаткашон менавиштед - вақте ки шумо навиштед, поёни ҳарфҳои худро бодиққат ба ҳар як сатри рӯи коғаз гузоштед. Шабакаи ибтидоӣ ва ибтидоӣ дар амал. Хати ибтидоӣ хати хаёлист, ки поёни ҳарфҳо ба он рост меояд.Агар шумо ҳоло ба ин мақола нигаред, шумо заминаи ибтидоиро "мебинед", гарчанде ки дар ҳақиқат сатр вуҷуд надорад. Мағзи шумо барои шумо он ҷо мегузорад, аз ин рӯ шумо метавонед ҷумлаҳоро хонед. Хатҳо дар рӯи коғази хатдор? Онҳо шабакаи ибтидоӣ мебошанд. Рост, то ҳукмҳои шумо рост бошанд ва дар фосилаи муайян гузошта шаванд, то матни шумо ритми амудии муқаррарӣ дошта бошад.

Ритми амудӣ

Ритми амудӣ дикта мекунад, ки матни саҳифа дар куҷо ҷойгир аст. Ин яке аз ҷузъҳоест, ки ба қобилияти скан ва хондани блокҳои матн таъсир мерасонад ва ин ба вокунишҳои эҳсосотии мо кӯмак мекунад. Вақте ки матн ритми қавии амудӣ ва фосилаи хуб дорад, мо ҳис мекунем, ки он касбӣ, мулоҳизакор ва боэътимод аст ва барои хондан бароҳат аст. Вақте ки матн ритм ва фосилаи заиф дорад, мо ҳис мекунем, ки он камтар баррасӣ мешавад, камтар касбӣ аст ва аксар вақт хонданаш мушкилтар аст. Ритми амудӣ як қисми коршоямӣ ва як қисми эстетика мебошад.

Гузаронидани ритм

Мутаассифона, веб ҳанӯз ҳам ҷияни камбизоати чоп аст, зеро қобилияти қобилияти амалисозии баъзе таҷрибаҳои бунёдиро оид ба намуд дорад. Дар веб мо метавонем шабакаи ибтидоиро ба ҳамон тарз истифода набарем, ки тарроҳи чоп (ё кӯдаки мактаб) кор мекунад - мо наметавонем заминаи матнро бо шабакаи ибтидоии ҳуҷҷат созем. CSS ягон мафҳуми шабакаи ибтидоӣ надорад. Пас, матни мо дақиқан дар хатҳои шабакаи ибтидоӣ нахоҳад нишаст. Ба ҷои ин, он ба амудӣ дар фосилаи байни хатҳо мутамарказ карда мешавад. Ин беҳтарин веб аст.

Биёед бо як ҳуҷҷати намуна амалӣ кунем. Аввалан, мо зарбро бо сохтани шабакаи ибтидоии намоён танзим мекунем. Барои ин, мо тасвири заминаеро такрор мекунем, ки хатҳои уфуқии мунтазам 22px ҷудо мекунем:

1. html {background: #fff url (baseline_22.png); }

Ура, мо коғази хатти худро дорем!

Шумо қайд хоҳед кард, ки ҳеҷ чиз рост намеояд. Барои тартиб додани ҳама чиз мо мехоҳем, ки канори поёни ҳамаи унсурҳо ба яке аз он сатрҳо зада шавад. Усули осонтарини иҷрои он бояд боварӣ ҳосил кард, ки ҳамаи элементҳо баландии амудиро (аз ҷумла ҳошия) мегиранд, ки он зарб аз 22 мебошад. Инҳоянд баъзе CSS, ки инро мекунад. Ман воҳиди REM-ро истифода мебарам, аммо барои браузерҳое, ки REM-ро намефаҳманд, як бозгашти EM медиҳад. Ман инчунин эквиваленти воҳиди PX-ро дар шарҳҳо дохил мекунам. Агар шумо ҳанӯз REM / EM-ро нафаҳмед, пас шумо метавонед танҳо арзиши px-ро истифода баред - онҳо ҳама баробаранд:

1. html {/ * андозаи ҳарф: 16px, баландии сатр: 22px * /
2. ҳарф: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. замина: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * ҳошияи боло ва поён ҳам 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. маржа: 1.375rem 0; }
8. h1 {/ * андозаи ҳарф 32px, баландии сатр 44px * /
9. / * em fallback * / font-size: 2em;
10. ҳуруфи андозаи: 2rem; баландии хат: 1.375; }
11. h2 {/ * андозаи ҳарф 26px, баландии сатр 44px * /
12. / * em fallback * / font-size: 1.75em;
13. андозаи ҳарф: 1.75rem; баландии хат: 1.5714285714; }
14. h3, h4, h5, h6 {/ * андозаи ҳарф 22px, баландии сатр 22px * /
15. / * em fallback * / font-size: 1.375em;
16. андозаи ҳарф: 1.375rem; баландии хат: 1; }
17. p, ul, blockquote {/ * ҳошияи поёни 22px, баландии сатр аз html (22px) * / ба мерос мондааст
18. / * em fallback * / margin-top: 0; ҳошияи поёни: 1.375em;
19. margin-top: 0; ҳошияи поёни: 1.375rem; }

Биёед бубинем, ки он чӣ ба мо медиҳад. Аҳамият диҳед, ки чӣ гуна ҳамаи матн хуб мувофиқат мекунад? Он дар заминаи асосӣ наменишинад, аммо ритми амудии пешбинишаванда дорад. Ин хуб ва озода аст.

Муомила бо тасвирҳо

Тасвирҳо чизҳоро мураккабтар мекунанд. Бубинед, вақте ки баъзеҳоро дохил мекунем, бо ритми мо чӣ мешавад. Онҳо онро ба мисли гузариш дар сабт вайрон мекунанд - суръат дуруст аст, аммо вақт хомӯш аст. Ҳамоҳангӣ тағир меёбад. Ин аз он сабаб аст, ки тасвирҳо баландие дошта бошанд, ки ин аз зарби ибтидоӣ зиёд аст, аз ин рӯ канори поёни он бо шабакаи ибтидоии мо рост намеояд.

Барои ислоҳи он, ки мо дар ҳақиқат бояд кор кунем, ба ҳар як тасвир маржа илова карда, поёни ҳошияро бо шабакаи мо созед. Ки барои автоматикунонӣ бо каме JavaScript кофӣ оддӣ аст. Ин аст нақшаи асосии мо:

1. Баландии ҳар як тасвирро муайян кунед.
2. Бубинед, ки арзиши ибтидоӣ ба фазои амудии тасвир дар айни замон чанд маротиба тақсим мешавад ва боқимондаро гиред.
3. Қисми боқимондаро аз сатҳи ибтидоӣ хориҷ кунед, то ҷуброне, ки мо бояд дар тасвир татбиқ кунем.
4. Ҷойгиршавӣ ҳамчун маржа ба поёни тасвир истифода кунед.

Поёни фазои амудии тасвир акнун бо шабакаи ибтидоӣ дуруст ҳамҷоя карда мешавад. Ин аст функсияи асосӣ дар jQuery, ки инро иҷро мекунад:

1. $ (window) .bind (’load ', function () {
2. $ ("img"). ҳар як (function () {
3. / * тағирёбандаҳо * /
4. var this_img = $ (ин);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * математикаро иҷро кунед * /
8. var remainder = parseFloat (img_height% baseline);
9. / * мо бояд чӣ қадар илова кунем? * /
10. var offset = parseFloat (заминаи боқимонда);
11. / * ҳошияро ба тасвир татбиқ кунед * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Чаро равзанаи бастан хат? Азбаски мо бояд интизор шавем, то тасвирҳо бор карда шаванд, то мо андозаи онҳоро боэътимод ба даст орем. Ин аст мисол бо ин рамзи асосӣ.

Такмили jQuery

Ҷаҳон кам пешрафта аст ва аз ин рӯ, дар ин ҷо пайдо мешавад - мо бояд бо чанд ҷузъиёти татбиқ сару кор гирем. Дар функсияе, ки мо дорем, чӣ бадӣ дорад? Фаровонӣ:

• Он бо тасвирҳое, ки ба ҷои шинокунанда ё басташуда дохил мешаванд, натиҷаҳои бадро ба бор меоранд.
• Чунин ба назар мерасад, ки дар баъзе тасвирҳо, алахусус онҳое, ки дар зарфҳо ҷойгиранд.
• Он бо тарҳҳои моеъ сарукор намекунад.
• Ин он қадар дубора қобили истифода нест.

Мо намехоҳем, ки ин рафторро ба тасвирҳое, ки дар дохили он ҷойгиранд, ба монанди чеҳраи табассум дар мисол татбиқ кунем. Тасвирҳои ғайримуқаррарӣ мутобиқ карда шудаанд, то канори поён дар ҳамон сатҳе, ки матн ҷойгир аст (не шабакаи ибтидоӣ). Ин маънои онро дорад, ки тасвир ба таври амудӣ ҷуброн карда шудааст. На CSS ва на JS ба мо роҳи фаҳмондани куҷо будани заминаи унсури матнро намедиҳанд, аз ин рӯ, мо ҷубронро намедонем. Мо бояд тасвирҳои дохилшударо нодида гирем ва ислоҳи худро танҳо дар тасвирҳое, ки ба онҳо гузошта шудааст, истифода барем намоиш: блок (хушбахтона, ҳама гуна тасвири шиновар ба таври худкор барои намоиши блок танзим карда мешавад).

Агар тасвир дар контейнер бошад, ҳошияи марбут ба тасвир пинҳон карда мешавад, зеро дар контейнер танзимоти зиёдатӣ ҷойгиранд. Инчунин, мо мехоҳем, ки ҳошия дар тасвир нест, балки ба ҷои он дар унсури контейнер. Дар мисол, мо мехоҳем, ки дар қуттии сафед ҳошия дошта бошем, на аз тасвири дохили қуттӣ, бинобар ин мо метавонем аз пайдо шудани холигиҳои аҷибе, ки дар қуттӣ пайдо мешаванд, канорагирӣ кунем.

Функсия танҳо як маротиба кор мекунад, аммо ҳангоми тарроҳии браузер ҳангоми тарроҳии моеъ тасвирҳо баландии худро иваз мекунанд (барои дидани ин мисолро ба чизи хеле танг тағир диҳед). Тағир додани андоза дубора ритмро мешиканад. Мо бояд функсияеро иҷро кунем, ки пас аз тағир ёфтани андозаи браузер ва инчунин пас аз бори саҳифа иҷро карда шавад. Тарҳҳои моеъ инчунин мушкилоти дигарро пешкаш мекунанд; тасвирҳо метавонанд пикселҳои касрӣ бошанд, масалан 132.34px. Ин дар навбати худ метавонад натиҷаҳои ғайричашмдоштро ба бор орад, ҳатто агар мо марзи касриро ба кор барем (агар шумо таваҷҷӯҳ дошта бошед, пас чаро: trac.webkit.org/wiki/LayoutUnit). Ҳамин тавр, ба мо лозим меояд, ки тасвирро дар баландии тамоми пиксел масҳ кунем, то аз хатогиҳои тарҳрезие, ки аз пикселҳои касрӣ ба вуҷуд омадаанд, ҷилавгирӣ кунем.

Ниҳоят, мо бояд инро ба функсияи аз нав истифодашаванда табдил диҳем. Дар асл, бо мураккабии ҳалли амалӣ нисбат ба ҳалли назариявӣ лозим аст, мо бояд плагин созем, ки онро дар дигар лоиҳаҳо дубора истифода барем.

Дар мисоли охирин шумо рамзеро пайдо мекунед, ки ҳамаи инҳоро ба даст меорад. JavaScript-и васлшаванда сахт шарҳ дода шудааст, то шумо пайравӣ кунед. Шумо метавонед плагинро бо занг ба таври зерин истифода баред:

1. $ (window) .bind (’load ', function () {
2. $ ("img"). baselineAlign ();
3. });

Ё, шумо метавонед ба плагин бигӯед, ки марҷаро ба контейнери номбурда татбиқ кунад, агар он ҳамчун волидайни тасвир бошад:

1. $ (window) .bind (’load ', function () {
2. $ ("img"). baselineAlign ({контейнер: '. popup'});
3. });

Хулоса

Нигоҳ доштани як ритми хуби амудӣ як таҷрибаи нозук, вале муассири тарроҳист, ки мунтазам дар чоп истифода мешавад. Ҳоло шумо принсипҳои асосиро медонед, дар бораи заминаи асосӣ ва шабакаи ибтидоӣ дониши корӣ доред ва баъзе маҳдудиятҳои тарҳбандии матни CSS ва чопро медонед. Шумо инчунин медонед, ки чӣ гуна ин маҳдудиятҳоро кор карда бароед, ҳуҷҷатҳоятонро бо ҳар гуна ритми амудӣ, ки ба шумо писанд аст, тартиб диҳед ва шумо як абзоре доред, ки бо мундариҷаи халалдоркунандаи тасвир мубориза баред.

Ҳангоми ба камол расидани CSS мо дар якҷоягӣ бо ҷияни чопии худ хусусиятҳои бештарро идома медиҳем, аз ин рӯ дарки хуби намуд барои эҷоди вебсайтҳои босифат муҳимтар хоҳад шуд. Агар шумо мехоҳед дар бораи навъҳои умумӣ маълумоти бештар гиред, ман ба www.thinkingwithtype.com тавсия медиҳам (ва китобро ҳамроҳи худ харед). Агар шумо пас аз мақолаҳои CSS дар бораи табобати намудҳо бошед, мақолаҳои сершумор ҳам дар ин ҷо ва ҳам дар дигар ҷойҳои интернет мавҷуданд. Ман инчунин тавсия медиҳам, ки навигариҳои Марк Боултон ва Эллиот Ҷей Стоксро бинед, ки ҳардуи онҳо дар бораи намуди тарроҳии веб махсус сӯҳбат мекунанд.

Хурсандӣ кардан!