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. background: #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; margin-bottom: 1.375em;
19. margin-top: 0; margin-bottom: 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% баштапкы деңгээл);
9. / * канча кошушубуз керек? * /
10. var ofset = parseFloat (баштапкы-калган);
11. / * сүрөткө маржаны колдонуу * /
12. this_img.css ("margin-bottom", ofset + "px");
13. });
14. });

Эмнеге window.bind сап? Анткени алардын көлөмүн ишенимдүү алуу үчүн сүрөттөр жүктөлгөнчө күтүшүбүз керек. Мына ушул негизги код иштеп жаткан мисал.

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 ({контейнер: '. калкыма'});
3. });

Корутунду

Жакшы тик ритмди сактоо бул басма сөздө такай колдонулган кылдат, бирок натыйжалуу дизайн практикасы. Сиз эми негизги принциптерди билесиз, баштапкы саптар жана тармактык тармактар ​​жөнүндө жакшы билесиз жана CSS текстинин макетин басып чыгарууга карата чектөөлөрүн билесиз. Сиз ошондой эле ошол чектөөлөрдү кантип иштеп чыгууну билесиз, документтериңизди каалаган вертикалдык ритмге ылайык түзө аласыз жана сизде сүрөттүн мазмунун бузууга жардам бере турган курал бар.

CSS бышып жетилгендиктен, биз басмаканадагы бөлөлөрүбүздүн катарында дагы көптөгөн функцияларды колдоно беребиз, ошондуктан сапаттуу веб-сайттарды түзүү үчүн типти жакшы түшүнүү маанилүү болуп калат. Эгерде сиз жалпысынан тип жөнүндө көбүрөөк билгиңиз келсе, анда www.thinkingwithtype.com сайтына кеңеш берүүнү сунуштайм (жана аны менен баруу үчүн китепти сатып алыңыз). Эгерде сиз CSS макалаларын дарылоо жөнүндө макалалардан кийин, Интернеттеги жана башка жерлердеги көптөгөн макалалар бар. Ошондой эле Марк Боултон менен Эллиот Джей Стокстун акыркы жаңылыктарын билүүнү сунуштайт элем, экөө тең веб-дизайнга байланыштуу тип жөнүндө көп сүйлөшүшөт.

Көңүл ачуу!