CSS va jQuery yordamida vertikal ritmni saqlang

Tarkib

• Turi
• Vertikal ritm
• Ritmni o'tkazish
• Tasvirlar bilan ishlash
• JQuery-ni takomillashtirish
• Xulosa

• Bilim kerak: CSS, asosiy jQuery
• Talab qiladi: jQuery, CSS, HTML
• Loyiha vaqti: 30 daqiqa
• Manba fayllarini yuklab oling

Siz tarkibni ishlab chiqqan deb taxmin qilsangiz, sizning dizayningizga ta'sir qilish uchun birinchi qaror bor turga bog'liq bo'lishi. Hatto tomonidan emas saytingizga ta'sir qiladigan narsani qilgan shriftni tanlash. Turi bosma va veb-dizayn uchun juda muhimdir va u juda murakkab; undan yaxshi foydalanishda to'plangan ko'plab atamalar, amaliyotlar, qoidalar va texnikalar mavjud. Ushbu maqola turlarning bir jihatini boshqarish uchun bitta usul bilan bog'liq bo'lib, uni Internetda qilish qiyin bo'lgan, ammo bosma nashrda odatiy hol: izchil vertikal ritmni saqlash, bu esa o'z navbatida bizda professional tartibga erishishga imkon beradi.

Turi

Bosib chiqarishda, o'lchamlari kattaroq bo'lgan har qanday element uchun, dizaynning asosi, ehtimol, boshlang'ich tarmog'i bo'lishi mumkin. Bu strukturani sahifaga olib kelish va tarkibning vertikal oqimini boshqarish uchun ishlatiladi. Deyarli hamma narsa ushbu asosiy tarmoqqa nisbatan joylashtirilgan. Agar siz shartlarni tanimasangiz, tashvishlanmang, hech kim boshlang'ich chiziqlar yoki asosiy tarmoqlarni bilmaydi; ular haqida allaqachon bilasiz. Shubhasiz chiziqli qog'ozga yozganingizda, maktabga qaytib borganingizda eslang - siz yozganingizda, harflaringizning pastki qismini qog'ozdagi har bir satrga yaxshilab joylashtirdingiz. Amaldagi asosiy va asosiy tarmoq. Boshlang'ich chiziq - bu harflarning pastki qismi mos keladigan xayoliy chiziq.Agar siz ushbu maqolani hozirda ko'rib chiqsangiz, aslida chiziq yo'qligiga qaramay, boshlang'ich chiziqni "ko'rasiz". Sizning miyangiz u erda bitta narsani qo'yadi, shuning uchun siz jumlalarni o'qishingiz mumkin. Chiziqli qog'ozdagi chiziqlarmi? Ular asosiy tarmoq. Sizning jumlalaringiz to'g'ri bo'lishi uchun to'g'ri va ma'lum bir vaqt oralig'ida joylashtiring, shunda matningiz muntazam vertikal ritmga ega bo'ladi.

Vertikal ritm

Vertikal ritm sahifadagi matn qaerda joylashganligini belgilaydi. Bu matn bloklarini skanerlash va o'qish qobiliyatimizga ta'sir qiluvchi tarkibiy qism bo'lib, bu bizning hissiy reaktsiyalarimizni xabardor qilishga yordam beradi. Matn kuchli vertikal ritmga va yaxshi bo'shliqqa ega bo'lsa, biz uni professional, mulohazali, nufuzli va o'qish uchun qulay deb bilamiz. Matn ritmi va intervallari sust bo'lsa, biz uni kamroq ko'rib chiqilgan, kam professional va ko'pincha o'qish qiyinroq deb bilamiz. Vertikal ritm - bu qulaylik va estetikaning bir qismi.

Ritmni o'tkazish

Afsuski, veb hali ham bosmaxonaning qarindoshi bo'lib, uning turiga oid ba'zi bir asosiy amaliyotlarni amalga oshirish qobiliyatiga ega. Internetda biz bosma dizayner (yoki maktabdagi bola) kabi boshlang'ich tarmoqdan foydalana olmaymiz - biz matnning boshlang'ich qismini hujjatning asosiy tarmog'iga moslashtira olmaymiz. CSS-da boshlang'ich tarmoq haqida tushuncha yo'q. Shunday qilib, bizning matnimiz asosiy tarmoq satrlarida to'liq o'tirmaydi. Buning o'rniga, u vertikal ravishda chiziqlar orasidagi bo'shliqda joylashgan bo'ladi. Bu veb qila oladigan eng yaxshi narsa.

Keling, misol hujjati bilan amaliy bo'laylik. Birinchidan, biz ko'rinadigan boshlang'ich panjarani o'rnatib, mag'lubiyatni o'rnatamiz. Buning uchun biz bir-biridan 22px gorizontal chiziqlarni chizish uchun takrorlanadigan fon rasmidan foydalanamiz:

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

Ura, bizda qog'ozli qog'oz bor!

Hech narsa to'g'ri kelmasligini ta'kidlaysiz. Hamma narsani bir tekis qilish uchun biz barcha elementlarning pastki chetiga shu qatorlardan birini urishini xohlaymiz. Buning eng oson usuli - barcha elementlarning vertikal balandlikni (shu jumladan, chekkalarni) 22 ga ko'paytirganligiga ishonch hosil qiling. Mana buni bajaradigan ba'zi CSS-lar. Men REM birligidan foydalanayapman, lekin REMni tushunmaydigan brauzerlar uchun EM-ni qaytarib beraman. Shuningdek, sharhlarda PX birligining ekvivalenti ham mavjud. Agar siz REM / EM ni hali tushunmasangiz, buning o'rniga faqat px qiymatlaridan foydalanishingiz mumkin - ularning barchasi tengdir:

1. html {/ * shrift hajmi: 16px, satr balandligi: 22px * /
2. shrift: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. fon: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6, h6 {/ * yuqori va pastki qism ikkalasi 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margin: 1.375rem 0; }
8. h1 {/ * shrift hajmi 32px, satr balandligi 44px * /
9. / * em fallback * / font-size: 2em;
10. shrift hajmi: 2rem; chiziq balandligi: 1.375; }
11. h2 {/ * shrift hajmi 26px, satr balandligi 44px * /
12. / * em fallback * / font-size: 1.75em;
13. shrift hajmi: 1.75rem; chiziq balandligi: 1.5714285714; }
14. h3, h4, h5, h6 {/ * shrift hajmi 22px, chiziq balandligi 22px * /
15. / * em fallback * / font-size: 1.375em;
16. shrift hajmi: 1.375rem; chiziq balandligi: 1; }
17. p, ul, blockquote {/ * pastki chekka 22px, satr balandligi html (22px) * / dan meros qilib olingan
18. / * em fallback * / margin-top: 0; margin-bottom: 1.375em;
19. margin-top: 0; margin-bottom: 1.375rem; }

Keling, bizga nima berayotganini ko'rib chiqaylik. Matnning barchasi qanday qilib yaxshi hizalanayotganiga e'tibor bering? U boshlang'ich satrda o'tirmaydi, lekin taxmin qilinadigan vertikal ritmga ega. Bu chiroyli va ozoda.

Tasvirlar bilan ishlash

Tasvirlar narsalarni yanada murakkablashtiradi. Ba'zilarini qo'shganda bizning ritmimiz bilan nima sodir bo'lishiga e'tibor bering. Ular buni yozuvdagi skip singari buzishadi - temp to'g'ri, ammo vaqt o'chirilgan. Hizalama o'zgaradi. Buning sababi shundaki, tasvirlar balandlikning bir necha baravariga teng balandlikka ega bo'lishi ehtimoldan yiroq, shuning uchun pastki chekka bizning asosiy katakchamizga to'g'ri kelmaydi.

Buni tuzatish uchun biz har bir rasmga chekka qo'shib, chekka pastki qismini bizning panjara bilan bir qatorda qilishimiz kerak. Qaysi biri kichik JavaScript bilan avtomatlashtirish uchun etarlicha sodda. Bizning asosiy rejamiz:

1. Har bir rasmning balandligini aniqlang.
2. Rasm hozirda egallab turgan vertikal bo'shliqqa asosiy qiymat necha marta bo'linishini ko'ring va qolganini oling.
3. Rasmga qo'llashimiz kerak bo'lgan ofsetni berish uchun qoldiqni dastlabki chiziqdan olib tashlang.
4. Rasmning pastki qismiga ofsetni margin sifatida qo'llang.

Rasmning vertikal maydonining pastki qismi endi asosiy chiziq bilan to'g'ri hizalanadi. Buni jQuery-da bajaradigan asosiy funktsiya:

1. $ (window) .bind ('load', function () {
2. $ ("img"). har biri (function () {
3. / * o'zgaruvchilar * /
4. var this_img = $ (bu);
5. var boshlang'ich = 22;
6. var img_height = this_img.height ();
7. / * matematikani bajaring * /
8. var remainder = parseFloat (img_height% bazeline);
9. / * qancha qo'shishimiz kerak? * /
10. var ofset = parseFloat (boshlang'ich-qoldiq);
11. / * rasmga chekka qo'ying * /
12. this_img.css ("margin-bottom", ofset + "px");
13. });
14. });

Nima uchun oyna. bog'lash chiziqmi? Biz o'lchamlarini ishonchli olishimiz uchun rasmlar yuklanguncha kutishimiz kerak. Ushbu asosiy kod ishlaydigan misol.

JQuery-ni takomillashtirish

Dunyo kamdan-kam hollarda oldinga siljiydi, shuning uchun ham bu erda paydo bo'ladi - biz dasturning bir nechta tafsilotlari bilan shug'ullanishimiz kerak. Bizda mavjud funktsiyalarda nima yomon? Mo'l-ko'l:

• U suzuvchi yoki bloklangan emas, balki ichkarida joylashgan tasvirlar bilan yomon natijalarni beradi.
• Ba'zi rasmlarda, xususan, konteynerlardagi rasmlarda xato ko'rinadi.
• Bu suyuqlik tartiblari bilan shug'ullanmaydi.
• Bu juda qayta ishlatilishi mumkin emas.

Biz ushbu xatti-harakatni misoldagi tabassum singari ichkaridagi rasmlarga qo'llamoqchi emasmiz. Ichki rasmlar hizalanadi, shunda pastki chet matn bilan bir xil chiziqda joylashgan (emas asosiy tarmoq). Bu shuni anglatadiki, rasm vertikal ravishda ofsetlangan. CSS ham, JS ham bizga matn elementining asosiy chizig'i qaerda ekanligini aniqlashga imkon bermaydi, shuning uchun biz ofsetni bilmaymiz. Ichki rasmlarni e'tiborsiz qoldirishimiz va tuzatishni faqat o'rnatilgan rasmlarga qo'llashimiz kerak displey: blokirovka (xayriyatki, har qanday suzuvchi rasm avtomatik ravishda blokni namoyish qilish uchun o'rnatiladi).

Agar rasm konteynerda bo'lsa, konteynerdagi haddan tashqari sozlamalar tufayli rasmga qo'llaniladigan margin yashiringan bo'lishi mumkin. Bundan tashqari, biz rasmdagi chekkani emas, balki uning o'rniga konteyner elementini xohlaymiz. Masalan, biz qutidagi ichidagi rasmga qaraganda, oq qutidagi chekkalarni afzal ko'ramiz, shuning uchun biz qutida paydo bo'ladigan g'alati bo'shliqlardan qochishimiz mumkin.

Funktsiya atigi bir marta ishlaydi, ammo suyuq dizaynda brauzer qayta kattalashganda tasvirlar balandligini o'zgartiradi (buni ko'rish uchun misolni juda tor narsaga o'zgartiring). O'lchovni o'zgartirish yana ritmni buzadi. Brauzerning o'lchamlari o'zgartirilgandan keyin ham, sahifa yuklangandan keyin ham ishlash uchun bizga funktsiya kerak. Suyuq maketlar boshqa muammolarni ham keltirib chiqaradi; rasmlar kasr pikselidan yuqori bo'lishi mumkin, masalan 132.34px. Bu o'z navbatida kutilmagan natijalarga olib kelishi mumkin, hatto fraksiyonel marjani qo'llasak ham (agar qiziqsangiz, nima uchun bu: trac.webkit.org/wiki/LayoutUnit). Shunday qilib, fraksiyonel piksellar tufayli yuzaga keladigan xatolarga yo'l qo'ymaslik uchun rasmni butun piksel balandligida massaj qilishimiz kerak bo'ladi.

Va nihoyat, biz buni qayta ishlatilishi mumkin bo'lgan funktsiyaga aylantirishimiz kerak. Aslida, nazariy echimdan ko'ra amaliy echim kerak bo'lgan murakkablik bilan, biz boshqa loyihalarda qayta ishlatilishi mumkin bo'lgan plaginni yaratishimiz kerak.

Oxirgi misolda siz bularning barchasiga erishadigan kodni topasiz. Plagin JavaScript-ni juda sharhlab qo'ydi, shunda siz ergashishingiz mumkin. Siz plaginni quyidagi qo'ng'iroq orqali ishlatishingiz mumkin:

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

Yoki siz plaginni rasmning ota-onasi sifatida mavjud bo'lsa, nomlangan konteynerga marginni ishlatishini aytishingiz mumkin:

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

Xulosa

Yaxshi vertikal ritmni saqlash - bu bosma nashrlarda muntazam ravishda ishlatiladigan nozik, ammo samarali dizayn amaliyoti. Siz endi asosiy printsiplarni bilasiz, boshlang'ich chiziqlar va boshlang'ich tarmoqlar haqida ma'lumotga egasiz va CSS-ning matn tartibini nashrga nisbatan ba'zi cheklashlarini bilasiz. Shuningdek, siz ushbu cheklovlar bo'yicha qanday ishlashni bilasiz, o'zingizning xohlagan vertikal ritmingizda hujjatlaringizni tuzasiz va sizda buzilgan tasvirlar bilan ishlashda yordam beradigan vosita mavjud.

CSS pishib yetgan sari biz bosma amakivachchalarimiz qatoriga qo'shimcha funktsiyalarni olishni davom ettirmoqdamiz, shuning uchun turni yaxshi tushunish sifatli veb-saytlarni yaratish uchun muhim ahamiyat kasb etadi. Agar umuman tur haqida ko'proq bilmoqchi bo'lsangiz, men www.thinkingwithtype.com saytini tavsiya etaman (va u bilan birga borish uchun kitob sotib oling). Agar siz CSS-dan davolanishga oid maqolalardan xabardor bo'lsangiz, bu erda ham, Internetning boshqa joylarida ham ko'plab maqolalar mavjud. Shuningdek, men Mark Boulton va Elliot Jey Stoklarning so'nggi yangiliklarini o'rganishni maslahat beraman, ularning ikkalasi ham veb-dizaynga nisbatan tur haqida tez-tez gaplashadilar.

Maza qiling!