Научете как да създадете този привлекателен компонент и да го използвате, за да добавите професионален щрих към вашия уеб дизайн.

Въпреки че компонентите на картата може да изглеждат прости, има специфични критерии, които трябва да се вземат предвид при създаването им. Като начало ще срещнете различни видове компоненти на карти и като уеб разработчик трябва да сте сигурни, че вашият интерфейс е достъпен.

Разберете как да създавате компоненти на карти с помощта на HTML и CSS и научете за съображенията за достъпност и персонализиране.

HTML структура за компоненти на карти

Анатомията на картата включва контейнера на картата, нейната заглавка, изображение и тяло, както и долен колонтитул на картата по избор.

Ще създадете три прости компонента на картата: карти за съдържание, продукти и профили. Това са едни от най-често срещаните типове карти, намиращи се в мрежата.

Започнете със създаване на контейнер div, като вложите още три div етикета с атрибути на клас за всяка карта в него, с подходящи дъщерни елементи за всяка от трите карти. Трябва да използвате елементи, които отчитат всички части в анатомията на картата. Например, картата със съдържание има таг за изображение за медия, таг h3 за заглавие и таг p за текст.

instagram viewer 

<дивклас="карта-контейнер">
 Карта със съдържание 
<дивклас="карта-съдържание">
<imgsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"алт=„Работно пространство с клавиатура, преносим компютър, чаша кафе и слушалка“>
<h3>Заглавиеh3>
<стр>Lorem ipsum dolor sit amet consectetur adipisicing elit. реклама
 Excepturi explicabo molestiae natus magnam rem...стр>
<аhref="#">Прочетете ощеа>
див>
 Продуктова карта 
<дивклас="продуктова карта">
<imgsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"алт=„Слушалки на жълт фон“>
<h3>Име на продуктаh3>
<стр>$19.99стр>
<стр>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.стр>
<аhref="#"><бутон>Добави в кошницатабутон>а>
див>
 Профилна карта 
<дивклас="профилна карта">
<imgsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"алт=„Бял мъж, облечен с черна риза“>
<h3>Джон Доуh3>
<стр>Уеб разработчикстр>
<стр>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat?стр>
<аhref="#"клас="връзка към профил">Виж профила>
див>
див>

Ето как трябва да изглежда това във вашия браузър по подразбиране, преди да приложите персонализиран стил:

Ако искате да създадете повече карти или да включите повече съдържание в една карта, направете го, преди да продължите.

CSS стил за компоненти на карти

Използвайки CSS, можете индивидуално да стилизирате всяка карта, за да я направите визуално привлекателна. Използвайте универсалния селектор за нулиране маржове, подплънки, и позиция с помощта оразмеряване на кутията. След това стилизирайте контейнера, като му дадете подложка, за да създадете малко пространство.

​​​​​​* {
марж: 0;
подплата: 0;
оразмеряване на кутията: гранична кутия;
}
.карта-контейнер {
подплата: 20px;
}

След това използвайте множествен селектор за всички карти, дайте му поле, за да осигурите пространство около всяка карта, и задайте дисплей и flex-direction за оформление. Освен това задайте граница, за да дефинирате картите, радиус на границата за някои криви и максимална ширина за отзивчивост.

.content-card,
.продуктова карта,
.профилна карта {
марж: 20px;
дисплей: flex;
flex-direction: колона;
граница: 2pxтвърдо#ccc;
граница-радиус: 7px;
максимална ширина: 250px;
}

Сега се фокусирайте върху всяка карта, като започнете с картата със съдържание, и й дайте фонов цвят и подложка. Добавете селектори за наследници за елементите в картата със съдържание.

Стилизирайте изображението с максимална ширина и радиус на границата. Задайте полето, семейството на шрифта и размера на шрифта за h3. За маркера за закрепване премахнете декорацията на текста и задайте цвета, полето отгоре и размера на шрифта.

.content-card {
заден план: #E9724C;
подплата: 10px;
}
.content-cardimg {
максимална ширина: 100%;
граница-радиус: 5px;
}


.content-cardh3 {
марж: 10px 0;
шрифтово семейство: монопространство;
размер на шрифта: 1.5rem;
}
.content-cardа {
текст-украса: нито един;
цвят: #6f2ed8;
марж:12px 0 7px 0;
размер на шрифта: 1рем;
}

Продуктовата карта изисква повече стил поради допълнителните си елементи. Създайте селектори за всеки дъщерен елемент и ги стилизирайте съответно.

The бутон елемент съдържа най-много стилови атрибути за постигане на ефекта на подканващата фраза. Подравнете само бутона вдясно, като зададете подравняването на flex-end в селектора за закрепване.

.продуктова картаimg {
граница-радиус: 5px 5px 0 0;
ширина: 100%;
}
.продуктова картаh3 {
марж: 5px 10px;
шрифтово семейство: монопространство;
размер на шрифта: 1.5rem;
}


.продуктова картастр {
марж: 5px 10px;
шрифтово семейство: Грузия, 'пътиНовримски', пъти, сериф;
}


.продуктова картаа {
самоподравняване: гъвкав край;
}
.продуктова картабутон {
ширина: 100px;
височина: 30px;
марж: 10px;
граница: 1pxтвърдо#8f3642;
граница-радиус: 4px;
Цвят на фона: #FFC857;
тегло на шрифта: 700;
курсор: показалец;
}

Накрая оформете профилната карта. Задайте радиуса на границата в горния десен и горния ляв ъгъл на изображението, за да съответства на контейнера. Коригирайте размера на изображението и го поберете, ако е необходимо. Използвайте поне два вида шрифт и допълващи се цветове върху текстовете за дефиниране. Освен това можете да направите активния елемент – т.е. етикетът за котва - откроете се с a граница.

.профилна картаimg {
граница-радиус: 5px 5px 0 0;
височина: 200px;
обектно прилягане: Покрийте;
}
.профилна картаh3 {
марж: 10px;
шрифтово семейство: монопространство;
размер на шрифта: 1.5rem;
}


.профилна картастр:първи от тип {
марж:0px 10px;
шрифтово семейство: 'пътиНовримски', пъти, сериф;
цвят: метличина;
}


.профилна картастр:последен от тип {
марж: 5px 10px;
размер на шрифта: 0.9rem;
}
.профилна картаа {
текст-украса: нито един;
марж: 5px 10px 10px 10px;
подплата: 5px 15px;
самоподравняване: център;
граница: 1pxтвърдометличина;
граница-радиус: 15px;
цвят: черен;
шрифтово семейство: монопространство;
тегло на шрифта: 500;
}

След стилизирането вашите карти трябва да изглеждат така:

Оформление и гъвкавост на картата

Отзивчивостта е жизненоважна за осигуряване на безпроблемно изживяване с интерфейса на всички устройства. Можеш използвайте CSS Flexbox или CSS Grid за оформлението. Най-накрая можете използвайте медийни заявки за отзивчивост.

Използване на CSS Flexbox

първо, добавете атрибут за показване и го настройте на flex на селектора на контейнера на вашата карта. Приложете flex-wrap и го настройте да обвива, така че картите да могат да се обвиват в рамките на малък размер на екрана.

Освен това задайте подравняване на елементи и justify-content свойства по ваше желание.

​​​​​​.карта-контейнер {
подплата: 20px;
дисплей: flex;
гъвкава обвивка: обвивам;
подравняване на елементи: център;
justify-content: пространство-равномерно;
}

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

Това заключава отзивчивостта при по-големи размери на екрана. За по-малък прозорец за изглед, като мобилен телефон, можете да използвате правило за медийна заявка и да зададете максималната ширина.

В медийната заявка определете кои елементи искате да промените. В този случай контейнерът на картата ще се промени.

Нагласи flex-direction да се колона, така че картите се подреждат вертикално. За да покажете картите в центъра на екрана, хоризонтално, задайте свойствата justify-content и align-items на централно:

@медия екран и (максимална ширина:480 пиксела) {
.карта-контейнер {
flex-direction: колона;
justify-content: център;
подравняване на елементи: център;
 }
}

За да видите ефекта на медийната заявка, проверете кода на CodePen.

Използване на CSS Grid

Първо настройте дисплея на контейнера за карти на мрежа. Използвайте grid-template-colons за да може картите автоматично да регулират ширината си. Използвай решетка-пролука за разстояние между картите. Използвайте justify-items за центриране на картите.

.карта-контейнер {
подплата: 20px;
дисплей: решетка;
grid-template-colons: повторете(автоматично напасване, minmax(300px, 1фр));
решетка-пролука: 20px;
justify-items: център;
}

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

За мобилни екрани приложете медийна заявка. В рамките на заявката променете оформлението на мрежата за по-малки прозорци. Комплект grid-template-colons да се 1фр за да накарате всяка карта да заеме цялата ширина. Също така настройка justify-items и подравняване на елементи свойства за центриране ще центрира картите както хоризонтално, така и вертикално.

@медия екран и (максимална ширина:480 пиксела) {
.карта-контейнер {
grid-template-colons: 1фр;
justify-items: център;
подравняване на елементи: център;
 }
}

от комбиниране на CSS Grid и медийни заявки, картите ще се увиват на по-големи екрани и ще се подреждат вертикално на по-малки екрани, постигайки отзивчиво оформление на карти. За да видите ефекта на медийната заявка, проверете кода на CodePen.

Съображения за достъпност на компонентите на картата

От решаващо значение е да се гарантира, че компонентите на картата, които създавате, са достъпни за всички потребители, включително тези с увреждания. Ето някои основни съображения, за да направите компонентите на картата по-достъпни:

  • Семантичен HTML
  • Навигация с клавиатура
  • Фокус стилове
  • ARIA етикети и роли
  • Алтернативен текст
  • Правилна структура на заглавието
  • Цветен контраст

Като прилагат тези съображения за достъпност, уеб разработчиците могат да гарантират, че компонентите на картата са включени.

Персонализиране и по-нататъшно проучване

Можете да отидете по-далеч, като персонализирате компонента на вашата карта. Ето някои идеи, които можете да разгледате:

  • Преходи и анимации
  • Стилове на изображения
  • Фон и цветови схеми
  • Стилове на граници
  • Интерактивни елементи

Има много различни начини, по които можете да персонализирате компонентите на вашата карта, така че не се колебайте да експериментирате.

Създавайте визуално привлекателни и отзивчиви компоненти на карти

Компонентите на картата могат да играят роля в почти всеки уебсайт. Създаването на такава с HTML и CSS е лесно, но знанието как да се справяте с достъпността също е важно.

Има други CSS ефекти, които можете да изпробвате, като CSS филтри и режим на смесване за визуални ефекти. Практикувайте да създавате повече с различна персонализация за визуална привлекателност.