ЦСС хармонике се широко користе за прошириве и склопиве меније, исечке, слике, видео записе, често постављана питања, листе и изводе чланака. Можете их лако креирати користећи ХТМЛ, ЦСС и ЈаваСцрипт (или јКуери). Прављење хармоника само за ЦСС је помало изазован задатак, али је од велике помоћи у окружењима са онемогућеним ЈаваСцрипт-ом.

У овом водичу ћете научити корак по корак приступ креирању хармонике само за ЦСС.

Прављење основне хармонике само помоћу ХТМЛ-а

Ако вам је приоритет креирање приступачне хармонике помоћу ХТМЛ-а, и ознаке су прави начин. Није важно који програмски језик користите, хармоника само за ХТМЛ остаће нетакнута. Створити означите као родитељ и унесите питање у а таг. Напишите описни одговор унутар а таг. Итерирајте процес за било који број честих питања.

ФАК 1



Лорем ипсум долор, сит амет цонсецтетур адиписицинг елит. Ратионе адиписци иллум еррор, хиц екпедита нумкуам импедит екплицабо витае иуре куае веро аутем куиа куибусдам темпора аткуе харум перферендис праесентиум долор!









instagram viewer



ФАК 2



Цонсекуунтур еарум париатур долорем репеллат темпорибус дуцимус сунт сусципит репудиандае цупидитате ин аццантиум рецусандае темпора синт елигенди, перферендис аспернатур арцхитецто волуптас лаборум адиписци некуе волуптатес цонсекуатур. 






ФАК 3



Тенетур, ек делецтус, перферендис апериам волуптатем цонсекуунтур молестиае ратионе рерум витае аб моди, минус плацеат куис дигниссимос. Долорем куаерат одит, иусто лабориосам поссимус, ин арцхитецто аликуам цоммоди сапиенте саепе секуи ат елигенди хиц репрехендерит репеллендус куос!

Стилизирање хармонике

Можете стилизовати хармонику подешавањем боја позадине, граница-радијус, маргина, паддинг, итд.

тело {
 фонт-фамили: 'Луцида Санс', 'Луцида Санс Регулар', 'Луцида Гранде', 'Луцида Санс Уницоде', Женева, Вердана, санс-сериф;
 мак-видтх: 30рем;
 маргина: 1.5рем ауто;
}
резиме {
 фонт-веигхт: 600;
 боја: ргб (255, 255, 255);
 боја позадине: ргб (7, 185, 255);
 паддинг: 1.2рем;
 маргин-боттом: 1.2рем;
 радијус границе: 0.5рем;
 курсор: показивач;
}

Излаз:

Једино ограничење је то што нећете имати контролу над сваким делом кода. ХТМЛ структура се може изменити, али не можете креирати прилагођену хармонику. Стога, хајде да направимо прилагођени одељак са честим питањима користећи напредни ЦСС.

Направите свој прилагођени одељак са честим питањима

Постоје две популарне методе за креирање прилагођене хармонике само за ЦСС. Можете користити поља за потврду или радио дугмад; објаснићемо обе методе.

Коришћење методе поља за потврду

Метод поља за потврду користи поље за потврду као тип улаза. Кад год корисник изабере картицу, означи поље за потврду и она се отвори. Можете отворити више картица истовремено користећи методу поља за потврду, слично као што можете означити више од једног поља за потврду унутар ХТМЛ образац.

ХТМЛ

Прилагођена хармоника само за ЦСС (честа питања)

Користећи метод за потврду






Како направити прилагођену хармонику користећи само ЦСС?


 Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Харум дебитис волуптас аликуид тенетур куас сусципит
 претпостављанда а, несциунт еум нобис еакуе, екерцитатионем дифферентио алиас уллам куиа. Цоррупти беатае
 нецесситатибус нихил.









Како променити висину псеудо-елемената?


 Темпорибус вел долоре нам долорем симиликуе волуптатум. Аликуам, долор ет! Темпоре моллитиа волптатибус
 дуцимус екцептионури долорибус аликуам ипсум вел, аццусантиум куо немо екпедита ессе еос либеро инцидунт
 репрехендерит фацере ек хиц ипса одит ин! Евениет.

Генерал ЦСС

Примените основни ЦСС на тело.

тело {
 боја: #502ц2ц;
 позадина: #ф1едец;
 паддинг: 1.2рем;
 фонт-фамили: 'Сегое УИ', Тахома, Генева, Вердана, санс-сериф;
 мак-видтх: 45рем;
 маргина: 0 ауто;
 фонт-сизе: 1.2рем;
}

Стилизирање хармонике

Прво сакријте поља за потврду тако што ћете променити унос.

/* Скривање поља за потврду или радио дугмета*/
улазни {
 позиција: апсолутна;
 непрозирност: 0;
 з-индекс: -1;
}

Сада, стилизујте хармонику. Можете додати::после псеудо-елемент за + знак. Можете се позвати на а Референтни графикон карактерног ентитета и користите било који Калкулатор конверзије ентитета да бисте пронашли ЦСС вредност нумеричке вредности. Овде је ЦСС вредност + је \002Б.

/* Стилови хармонике */
.фак {
 боја: #ффе3е3;
 маргин-боттом: 3рем;
}
.фак-лабел {
 фонт-сизе: 1.5рем;
 дисплеј: флек;
 алигн-итемс: центар;
 јустифи-цонтент: простор-између;
 паддинг: 1ем;
 позадина: #б61818;
 фонт-веигхт: болд;
 курсор: показивач;
 усер-селецт: нема;
}
.фак-лабел:: после {
 садржај: '\002Б';
 паддинг: 0.51рем;
 трансформисати: скала (1.8);
 тект-алигн: центар;
 прелаз: све 0,35с;
}
.фак-цонтент {
 макс. висина: 0;
 паддинг: 0 1ем;
 боја: #2ц3е50;
 позадина: бела;
 прелаз: све 0,35с;
 приказ: нема;
}

Сада, додајмо функционалност хармоници помоћу суседни и селектори атрибута. овде, \2013 је ЦСС вредност за –, нумеричка вредност која представља –.

унос: означено + .фак-лабел {
 позадина: #8ф1414;
}
инпут: цхецкед + .фак-лабел:: афтер {
 садржај: '\2013';
 трансформисати: скала (1,5);
}
инпут: цхецкед ~ .фак-цонтент {
 макс. висина: 100вх;
 паддинг: 1ем;
 дисплеј блок;
 прелаз: све 0,35с;
}

Излаз:

Коришћење методе радио дугмета

Радио Буттон Метход има подешен тип уноса на радио. Кад год корисник кликне на картицу, отвара се скривено радио дугме које одговара тој картици. Када кликнете на следећу картицу, претходна картица се одмах затвара. Можете отворити само једну картицу истовремено користећи метод радио дугмета.

ХТМЛ

Прилагођена хармоника само за ЦСС (честа питања)

Коришћење методе радио дугмета






Како направити хармонику методом радио дугмета?


 Лорем, ипсум долор сит амет цонсецтетур адиписицинг елит. Волуптатибус маиорес куискуам аткуе дицта еум нумкуам нецесситатибус, ниси нон адиписци темпорибус цоррупти либеро хиц аспернатур куибусдам долорес перферендис, оффициис одио репеллендус.









Како направити прилагођену хармонику користећи само ЦСС?


 Апериам долорес аутем одит, нихил еиус сит минима куас лаудантиум аспернатур поссимус реициендис витае дуцимус лаборе куидем велит вел темпорибус! Илло сунт плацеат оффициис, тиуре магнам. Ад сит перферендис дуцимус дицта, ест аспернатур аспериорес, куаси беатае куос деленити.









Шта значи стил хармонике?


 Лаудантиум куибусдам лабориосам хиц омнис куас уллам цоммоди рем. Арцхитецто ут лаборум еакуе цум порро долоремкуе хиц цупидитате темпора темпорибус дуцимус долорес магнам куидем, фацилис сапиенте оффициис волуптас? Вел, не!









Затвори све ×

ЦСС

Копирајте горњи ЦСС Метода поља за потврду пошто се обе методе разликују само од структуралне тачке гледишта. Можда ћете приметити да је једна картица отворена све време. Ово се дешава зато што не можете да скинете ознаку са радио дугмади попут поља за потврду. Да бисте то постигли, додајте ЦСС код у наставку на радио дугме „Затвори све“ без икаквог описа.

/* Затварање свих */
.фак-лабел {
 положај: релативан;
}
.фак-цлосе {
 дисплеј: инлине-блоцк;
 паддинг: 1рем;
 фонт-сизе: 1рем;
 позадина: #б61818;
 курсор: показивач;
 позиција: апсолутна;
 лево: 64рем;
}

Излаз:

Наставите да експериментишете и додајте анимације

Постоји једноставна логика иза хармоника: када кликнете на мени, појавиће се његов скривени садржај. Пошто сада знате како да направите хармонику, крајње је време да примените и експериментишете са својим учењем. Можете да направите хоризонталне хармонике да бисте побољшали дизајн, посебно када приказујете слике. Експериментишите са кодом прилагођавањем ефекта прелаза помоћу анимација кључних кадрова.

Наинци Моуриа (Објављено 16 чланака)

Наинци се специјализовао за изградњу веб локација са високим одзивом и ефикасне стратегије садржаја заједно са веб копијама. Она је слободни технолошки писац који пажљиво прати трендовске технологије.

Више од Наинци Моуриа