Креирање прилагођених компоненти картице помоћу ХТМЛ-а и ЦСС-а

Иако компоненте картице могу изгледати једноставне, постоје специфични критеријуми које треба узети у обзир приликом њиховог креирања. За почетак ћете наићи на различите типове компоненти картице и, као веб програмер, морате осигурати да је ваш интерфејс доступан.

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

ХТМЛ структура за компоненте картице

Анатомија картице укључује контејнер картице, њено заглавље, слику и тело, као и опционо подножје картице.

Направићете три једноставне компоненте картице: картице садржаја, производа и профила. Ово су неке од најчешћих типова картица које се налазе на вебу.

Започните креирањем контејнера див, угнежђујући још три див ознаке са атрибутима класе за сваку картицу унутар њега, са одговарајућим подређеним елементима за сваку од три картице. Требало би да користите елементе који обухватају све делове у анатомији картице. На пример, картица садржаја има ознаку слике за медије, х3 ознаку за наслов и п ознаку за текст.

<дивкласа="картица-контејнер">
 Картица садржаја 
<дивкласа="картица садржаја">
<имгсрц=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? иклиб=рб-4.0.3&икид=М3вкМјА3фДБ8МХкваГ90би1вИВдлфХк8фГВуфДБ8фХк8фА%3Д%3Д&ауто=формат&фит=цроп&в=200&к=80"алт=„Радни простор са нотебооком са тастатуром, шољом кафе и слушалицом“>
<х3>Насловх3>
<стр>Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Ад
 осим екплицабо молестиае натус магнам рем...стр>
<ахреф="#">Опширнијеа>
див>
 Картица производа 
<дивкласа="картица производа">
<имгсрц=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? иклиб=рб-4.0.3&икид=М3вкМјА3фДБ8МХкваГ90би1вИВдлфХк8фГВуфДБ8фХк8фА%3Д%3Д&ауто=формат&фит=цроп&в=200&к=80"алт="Слушалице на жутој позадини">
<х3>Назив производах3>
<стр>$19.99стр>
<стр>Лорем ипсум долор сит амет цонсецтетур адиписицинг елит.
 Аспернатур, волуптатибус.стр>
<ахреф="#"><дугме>Додај у колицадугме>а>
див>
 Профилна картица 
<дивкласа="профил-картица">
<имгсрц=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? иклиб=рб-4.0.3&икид=М3вкМјА3фДБ8МХкваГ90би1вИВдлфХк8фГВуфДБ8фХк8фА%3Д%3Д&ауто=формат&фит=цроп&в=200&к=80"алт=„Бели мушкарац који носи црну кошуљу на дугмад“>
<х3>Н.Н. лицех3>
<стр>Веб Девелоперстр>
<стр>Лорем ипсум долор сит амет цонсецтетур адиписицинг елит.
 Екпедита темпора еос молестиас репеллат?стр>
<ахреф="#"класа="профил-линк">Погледај профила>
див>
див>

Ево како би ово требало да изгледа у вашем претраживачу, подразумевано, пре него што примените било који прилагођени стил:

Ако желите да направите више картица или да укључите више садржаја у једну картицу, урадите то пре него што наставите.

ЦСС стил за компоненте картице

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

​​​​​​* {
маргина: 0;
паддинг: 0;
бок-сизинг: гранична кутија;
}
.картица-контејнер {
паддинг: 20пк;
}

Затим користите вишеструки селектор за све картице, дајте му маргину да бисте обезбедили простор око сваке картице и подесите приказ и флек-дирецтион за распоред. Такође, поставите ивицу да дефинишете картице, ивицу радијуса за неке кривине и максималну ширину за одзив.

.цонтент-цард,
.картица производа,
.профил-картица {
маргина: 20пк;
приказ: флек;
флек-дирецтион: колона;
граница: 2пкчврст#ццц;
граница-радијус: 7пк;
максимална ширина: 250пк;
}

Сада се фокусирајте на сваку картицу, почевши од картице са садржајем, и дајте јој боју позадине и допуну. Додајте селекторе потомака за елементе на картици садржаја.

Стилизирајте слику помоћу максимална ширина и граница-радијус. Подесите маргину, породицу фонтова и величину фонта за х3. За ознаку сидра, уклоните декорацију текста и подесите боју, врх маргине и величину фонта.

.цонтент-цард {
позадини: #Е9724Ц;
паддинг: 10пк;
}
.цонтент-цардимг {
максимална ширина: 100%;
граница-радијус: 5пк;
}
.цонтент-цардх3 {
маргина: 10пк 0;
породица фонтова: моноспаце;
фонт-сизе: 1.5рем;
}
.цонтент-царда {
текст-декорација: ниједан;
боја: #6ф2ед8;
маргина:12пк 0 7пк 0;
фонт-сизе: 1рем;
}

Картица производа ће захтевати више стила због својих додатних елемената. Креирајте селекторе за сваки подређени елемент и стилизујте их у складу са тим.

Тхе дугме елемент садржи највише стилских атрибута за постизање ефекта позива на акцију. Поравнајте само дугме удесно тако што ћете поставити алигн-селф на флек-енд у бирачу сидра.

.картица производаимг {
граница-радијус: 5пк 5пк 0 0;
ширина: 100%;
}
.картица производах3 {
маргина: 5пк 10пк;
породица фонтова: моноспаце;
фонт-сизе: 1.5рем;
}
.картица производастр {
маргина: 5пк 10пк;
породица фонтова: Георгиа, 'ТимесНоваРоман', Тимес, сериф;
}
.картица производаа {
алигн-селф: флек-енд;
}
.картица производадугме {
ширина: 100пк;
висина: 30пк;
маргина: 10пк;
граница: 1пкчврст#8ф3642;
граница-радијус: 4пк;
боја позадине: #ФФЦ857;
фонт-веигхт: 700;
курсор: показивач;
}

На крају, стилизирајте картицу профила. Поставите радијус ивице у горњем десном и горњем левом углу слике да одговара контејнеру. Подесите величину слике и прилагодите се ако је потребно. Користите најмање два типа фонта и комплементарне боје на текстовима за дефиницију. Такође, можете направити елемент који се може извршити—тј. ознака сидра—издваја се са а граница.

.профил-картицаимг {
граница-радијус: 5пк 5пк 0 0;
висина: 200пк;
објектно уклапање: поклопац;
}
.профил-картицах3 {
маргина: 10пк;
породица фонтова: моноспаце;
фонт-сизе: 1.5рем;
}
.профил-картицастр:први у врсти {
маргина:0пк 10пк;
породица фонтова: 'ТимесНоваРоман', Тимес, сериф;
боја: цорнфловерблуе;
}
.профил-картицастр:последњи-од-типа {
маргина: 5пк 10пк;
фонт-сизе: 0.9рем;
}
.профил-картицаа {
текст-декорација: ниједан;
маргина: 5пк 10пк 10пк 10пк;
паддинг: 5пк 15пк;
алигн-селф: центар;
граница: 1пкчврстцорнфловерблуе;
граница-радијус: 15пк;
боја: црн;
породица фонтова: моноспаце;
фонт-веигхт: 500;
}

Након стилизовања, ваше картице би требало да изгледају овако:

Изглед и флексибилност картице

Одзив је од виталног значаја за пружање беспрекорног искуства са интерфејсом на свим уређајима. Можете користите или ЦСС Флекбок или ЦСС Грид за распоред. Коначно, можете користите медијске упите за одзив.

Коришћење ЦСС Флекбок-а

Прво, додајте атрибут приказа и поставите га на флек на бирачу контејнера за картице. Нанесите флек-врап и подесите га да се омота, тако да се картице могу умотати у оквиру мале величине екрана.

Такође, подесите алигн-итемс и оправдати-садржај својства по вашој жељи.

​​​​​​.картица-контејнер {
паддинг: 20пк;
приказ: флек;
флек-врап: замотати;
алигн-итемс: центар;
оправдати-садржај: просторно равномерно;
}

Страница би требало да изгледа овако:

То закључује одзивност на већим величинама екрана. За мањи оквир за приказ, као што је мобилни телефон, можете користити правило медијског упита и поставити максималну ширину.

Унутар медијског упита одредите које елементе желите да промените. У овом случају, контејнер картице ће се променити.

Подесите флек-дирецтион до колона, тако да се карте слажу вертикално. Да бисте приказали картице у центру екрана, хоризонтално, поставите својства јустифи-цонтент и алигн-итемс на центар:

@медиа екран и (максимална ширина:480пк) {
.картица-контејнер {
флек-дирецтион: колона;
оправдати-садржај: центар;
алигн-итемс: центар;
 }
}

Да бисте видели ефекат медијског упита, проверите код укључен ЦодеПен.

Коришћење ЦСС Грид-а

Прво, поставите приказ контејнера за картице на мрежу. Користите грид-темплате-колумнс да омогућите картицама да аутоматски подесе своју ширину. Користи грид-гап за размак између картица. Користите јустифи-итемс да центрирате карте.

.картица-контејнер {
паддинг: 20пк;
приказ: грид;
грид-темплате-колумнс: понављање(ауто-фит, минмак(300пк, 1фр));
грид-гап: 20пк;
јустифи-итемс: центар;
}

Страница би требало да изгледа овако:

За мобилне екране примените медијски упит. Унутар упита измените изглед мреже за мање оквире за приказ. Комплет грид-темплате-колумнс до 1фр да би свака картица заузела пуну ширину. Такође, подешавање јустифи-итемс и алигн-итемс својства до центра ће центрирати картице и хоризонтално и вертикално.

@медиа екран и (максимална ширина:480пк) {
.картица-контејнер {
грид-темплате-колумнс: 1фр;
јустифи-итемс: центар;
алигн-итемс: центар;
 }
}

Од стране комбинујући ЦСС Грид и медијске упите, картице ће се омотати на већим екранима и слагати вертикално на мањим екранима, постижући изглед картице који реагује. Да бисте видели ефекат медијског упита, проверите код укључен ЦодеПен.

Разматрања приступачности за компоненте картице

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

• Семантички ХТМЛ
• Навигација помоћу тастатуре
• Фокус стилови
• АРИА ознаке и улоге
• Алт тект
• Правилна структура наслова
• Контраст боја

Применом ових разматрања приступачности, веб програмери могу да обезбеде да компоненте картице буду инклузивне.

Прилагођавање и даље истраживање

Можете ићи даље са прилагођавањем компоненте картице. Ево неколико идеја које можете размотрити:

• Прелази и анимације
• Стилови слика
• Позадина и шеме боја
• Бордер стилес
• Интерактивни елементи

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

Направите визуелно привлачне и прилагодљиве компоненте картице

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

Постоје и други ЦСС ефекти које можете испробати, као што су ЦСС филтери и режим мешања за визуелне ефекте. Вежбајте да креирате више помоћу различитих прилагођавања за визуелну привлачност.