Како креирати ЦСС-базирану хармонику садржаја
У данашњем водичу ћемо научити како можемо да креирамо Хоризонтални и вертикални садржај хармоника само помоћу ЦСС3. Постоје многи јКуери додаци који могу да ураде овај посао за вас, али шта да радите ако посетилац има Јавасцрипт искључен, онда хармоника неће радити исправно. Ако је ваша хармоника чисто у ЦСС-у онда ће радити за све ваше посетиоце.
Направићемо хоризонтал и вертикала садржај хармоника. Када кликнете на наслов наслова, слајд ће се отворити и приказати цео садржај, а ево и брзог прегледа (сцреенсхотови) како изгледају.
Као што видите? Нека кодирање почне!
1. Припрема ХТМЛ-а и садржаја
За почетак ћемо креирати ХТМЛ за хармонику.
Структури треба контејнер див и онда имају сецтион за сваки слајд у хармоници. У овом примеру ћемо имати 5 слајдова. Сваки од слајдова ће имати наслов и параграф за садржај.
О нама
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
Услуге
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
Блог
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
Портфолио
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
Контакт
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
Сада имамо наше слајдове и можемо почети обликовати хармонику.
2. ЦСС Стилинг
Прво морамо обликовати садржај див хармонику. Ово ће нам дати идеју како приказати сваки од слајдова и сваки од наслова.
/ * Дефине Аццордион бок * / .аццордион видтх: 830пк; оверфлов: хидден; маргин: 10пк ауто; цолор: # 474747; позадина: # 414141; паддинг: 10пк;
Затим ћемо креирати наслове за сваки од слајдова.
.хармоника флоат: лево; оверфлов: хидден; цолор: # 333; курсор: показивач; бацкгроунд: # 333; маргин: 3пк; .аццордион секција: ховер бацкгроунд: # 444;
Постављамо боју позадине на тамно сиву боју у одељку да би био наслов где ће посетиоци кликнути да би приказали слајд. Користимо овај одељак и за наслов и за садржај што значи да можемо да користимо мање ХТМЛ-а и да поново користимо наслов слајда као наслов садржаја.
.хармоника секција п дисплаи: ноне;
У овом тренутку сви слајдови ће бити затворени па морамо бити сигурни да је параграф скривен од погледа док се слајд не отвори, тако да за сада поставите приказ параграфа.
.секција хармоника: после поситион: релативе; фонт-сизе: 24пк; цолор: # 000; фонт-веигхт: болд; .аццордион секција: нтх-цхилд (1): после цонтент: '1'; .аццордион секција: нтх-цхилд (2): после цонтент: '2'; .аццордион секција: нтх-цхилд (3): после цонтент: '3'; .аццордион секција: нтх-цхилд (4): после цонтент: '4'; .аццордион секција: нтх-цхилд (5): после цонтент: '5';
Са затвореним слајдовима желимо да прикажемо број на дну наслова да бисмо рекли на којем броју слајдова смо укључени. За ово ћемо користити ЦСС за додавање садржаја након наслова секције, што се може урадити коришћењем :после селектор псеудо класе.
Сада смо креирали наслов за слајд можемо направити догађај кликом да прикажемо слајд у хармоници. Међутим, постоји проблем, ЦСС нема догађај кликања, због чега се хармоника обично креира помоћу јКуери тако да можемо приложити догађај кликом на текст наслова.
Морамо да опонашамо догађај кликом у ЦСС-у који се може урадити помоћу : таргет селектор псеудо класе.
3. Коришћење : таргет Селектор псеудо-класе
: таргет омогућава нам да стилизујемо идентификатор фрагмента. Понекад користимо ознаку за сидрење на страници да бисмо указали на место на страници. Кликом на линк тхе ид у ознаци сидра постаје мета и можете је стилизовати користећи : таргет селектор.
Да би ово додали у хармонику, потребно је додати линк око наслова који показује на ид слајда.
О нама
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Суспендиссе ид лобортис масса. Нунц виверра велит лео, сит амет елементум ми. Фусце посуере нунц а ми темпус малесуада. Цурабитур фацилисис рхонцус ерос егет плацерат. Аликуам семпре маурис сит амет јусто темпор нец лациниа магна молестие. Етиам плацерат цонгуе долор витае адиписцинг. Аликуам ац ерат лорем, али иацулис јусто. Етиам маттис дигниссим гравида. Аликуам нец јусто анте, нон семпер ми. Нулла цонсецтетур интердум масса, вел порта еним вулпутате сед. Маеценас елит куам, егестас егет плацерат нон, фрингилла вел ерос. Нам вехицула елементум нулла сед послед. Пхаселлус еу ерат еним. Праесент ат магна нон масса дапибус сцелерискуе ин еу лорем.
.хармоника секција: таргет бацкгроунд: #ФФФ; паддинг: 10пк; .аццордион секција: таргет: ховер бацкгроунд: #ФФФ; .аццордион секција: таргет х2 видтх: 100%; .аццордион сецтион: таргет х2 а цолор: # 333; паддинг: 0; .аццордион сецтион: таргет п дисплаи: блоцк; .аццордион секција х2 а паддинг: 8пк 10пк; дисплеј блок; фонт-сизе: 16пк; фонт-веигхт: нормал; цолор: #еее; тект-децоратион: ноне;
Горњи код ће промијенити величину слајда како би одговарао остатку хармонике и мијења боју позадине у бијелу. Параграф је скривен тако да сада на мети морамо да прикажемо параграф.
Када кликнете на наслов хармоника, слајд ће променити стил да би приказао садржај слајда.
4. Хоризонтална хармоника
Горњи код ће створити општу хармонику сада можемо почети да правимо ЦСС промене за разлике између хоризонталне и вертикалне хармонике. Оба ова хармоника имају исту функционалност, али стилски наслов би био другачији.
.хоризонтална секција ширина: 5%; хеигхт: 250пк; -моз-транситион: ширина 0.2с олакшава; -вебкит-транситион: ширина 0.2с олакшава-оут; -о-прелаз: ширина 0.2с олакшава се; прелаз: ширина 0.2с;
Прво поставимо видтх одломка наслова до 5% тако да је затворен слајд. Пошто је одељак и наслов и садржај за слајд, потребно је да додамо анимацију за приказивање садржаја помоћу својства прелаза.
/ * Поставите број слајда * / .хоризонтални одељак: после топ: 140пк; лево: 15пк;
Положај броја на слајду ће бити на истој позицији на сваком затвореном наслову који је различито постављен од вертикалних наслова.
/ * Заглавље затвореног слајда * / .хоризонтал сецтион х2 -вебкит-трансформ: ротате (90дег); -моз-трансформ: ротате (90дег); -о-трансформ: ротирати (90дег); трансформ: ротате (90дег); видтх: 240пк; позиција: релативна; лево: -100пк; топ: 85пк; / * На миша над отворен слајд * / .хоризонтал: таргет видтх: 73%; хеигхт: 230пк; .хоризонтал: таргет х2 топ: 0пк; лево: 0; -вебкит-трансформ: ротирати (0дег); -моз-трансформ: ротирати (0дег); -о-трансформ: ротирати (0дег); трансформ: ротирати (0дег);
Горњи код ће промијенити величину слајда како би одговарао остатку хармонике. Наслов је ротиран вертикално да би се покренуо низ наслова, али сада са отвореним слајдом морамо да вратимо текст назад на хоризонталну ротацију текста на 0 степени.
5. Вертикална хармоника
Вертикална хармоника функционише на исти начин као и хоризонтална хармоника, осим што је потребно променити хеигхт уместо видтх и не треба да мењамо поравнање текста.
.вертикални пресек ширина: 100%; хеигхт: 40пк; -вебкит-транситион: висина 0.2с олакшава-оут; -моз-транситион: висина 0.2с олакшава-оут; -о-прелаз: висина 0.2с олакшава се; транзиција: висина 0.2с лакоћа; / * Сет висина слајда * / .вертицал: таргет хеигхт: 250пк; ширина: 97%;
На таргет догађај вертикалне хармонике ћемо промијенити хеигхт наслова да бисте приказали слајд.
.вертикална секција х2 поситион: релативе; лево: 0; топ: -15пк; / * Поставите позицију броја на слајду * / .вертицал секција: након топ: -60пк; лево: 810пк; .вертицал сецтион: таргет: афтер лефт: -9999пк;
Горе ће променити позицију текста наслова на затвореном слајду. Са затвореним клизачем морамо да подесимо позицију броја који се налази десно од хармонике. Када је слајд отворен, морамо да сакријемо овај број на наслов када је циљ постављен тако да мењамо леву позицију са екрана.
Када кликнете на наслов хармоника, слајд ће променити стил да би приказао садржај слајда.
Напомена уредника: Овај пост је написао / ла Паул Ундервоод фор Хонгкиат.цом. Паул је ПХП Веб Девелопер из Бристола, Велика Британија. Он пише туторијале о Веб Девелопмент-у: главне теме укључују ПХП, јКуери, ЦСС3 и ХТМЛ5. Он такође бележи корисне исјечке кода у Паулунд.цо.ук.
