Создание пользовательских компонентов карты с помощью HTML и CSS

Хотя компоненты карты могут показаться простыми, при их создании необходимо учитывать определенные критерии. Для начала вы столкнетесь с различными типами карточных компонентов, и, как веб-разработчик, вы должны убедиться, что ваш интерфейс доступен.

Узнайте, как создавать компоненты карточек с помощью HTML и CSS, а также узнайте об особенностях специальных возможностей и настройке.

Структура HTML для компонентов карты

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

Вы создадите три простых компонента карты: контент, продукт и карты профиля. Это одни из самых распространенных типов карт, которые можно найти в Интернете.

Начните с создания контейнера div, вложив в него еще три тега div с атрибутами класса для каждой карточки внутри него, с соответствующими дочерними элементами для каждой из трех карточек. Вы должны использовать элементы, которые учитывают все части анатомии карты. Например, карточка контента имеет тег изображения для медиа, тег h3 для заголовка и тег p для текста.

<дивсорт="карточка-контейнер">
 Карточка содержимого 
<дивсорт="контент-карта">
<изображениеисточник=" 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. Объявление
 за исключением explicabo molestiae natus magnam rem...п>
<аhref="#">Читать далееа>
див>
 Карточка товара 
<дивсорт="карточка товара">
<изображениеисточник=" 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.
 Аспернатур, voluptatibus.п>
<аhref="#"><кнопка>добавить в корзинукнопка>а>
див>
 Карточка профиля 
<дивсорт="профиль-карта">
<изображениеисточник=" 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;
размер коробки: пограничный ящик;
}
.card-контейнер {
набивка: 20пикс.;
}

Затем используйте множественный селектор для всех карточек, дайте ему поле, чтобы обеспечить пространство вокруг каждой карточки, и установите отображать и flex-направление для макета. Кроме того, установите границу для определения карточек, радиус границы для некоторых кривых и максимальную ширину для отзывчивости.

.content-карта,
.карточка продукта,
.profile-card {
допуск: 20пикс.;
отображать: сгибаться;
flex-направление: столбец;
граница: 2пикс.твердый#ccc;
радиус границы: 7пикс.;
Максимальная ширина: 250пикс.;
}

Теперь сосредоточьтесь на каждой карточке, начиная с карточки содержимого, и задайте для нее цвет фона и отступы. Добавьте селекторы потомков для элементов в карточке содержимого.

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

.content-карта {
фон: #E9724C;
набивка: 10пикс.;
}
.content-картаизображение {
Максимальная ширина: 100%;
радиус границы: 5пикс.;
}
.content-картаh3 {
допуск: 10пикс. 0;
семейство шрифтов: моноширинный;
размер шрифта: 1.5рем;
}
.content-картаа {
украшение текста: никто;
цвет: #6f2ed8;
допуск:12px 0 7пикс. 0;
размер шрифта: 1бэр;
}

Карточка товара потребует большего стиля из-за дополнительных элементов. Создайте селекторы для каждого дочернего элемента и настройте их соответствующим образом.

кнопка элемент содержит наибольшее количество атрибутов стиля для достижения эффекта призыва к действию. Выровняйте только кнопку вправо, установив для align-self значение flex-end в селекторе привязки.

.карточка продуктаизображение {
радиус границы: 5пикс. 5пикс. 0 0;
ширина: 100%;
}
.карточка продуктаh3 {
допуск: 5пикс. 10пикс.;
семейство шрифтов: моноширинный;
размер шрифта: 1.5рем;
}
.карточка продуктап {
допуск: 5пикс. 10пикс.;
семейство шрифтов: Грузия, 'разНовыйРимский', раз, с засечками;
}
.карточка продуктаа {
выровнять себя: гибкий конец;
}
.карточка продуктакнопка {
ширина: 100пикс.;
высота: 30пикс.;
допуск: 10пикс.;
граница: 1пикс.твердый#8f3642;
радиус границы: 4пикс.;
фоновый цвет: #FFC857;
вес шрифта: 700;
курсор: указатель;
}

Наконец, стилизуйте карточку профиля. Установите радиус границы в верхнем правом и верхнем левом углу изображения, чтобы он соответствовал контейнеру. Отрегулируйте размер изображения и подгоните его, если это необходимо. Используйте по крайней мере два типа шрифта и дополнительные цвета в тексте для четкости. Кроме того, вы можете сделать активный элемент, т.е. якорный тег — выделяйтесь граница.

.profile-cardизображение {
радиус границы: 5пикс. 5пикс. 0 0;
высота: 200пикс.;
объект-подходящий: крышка;
}
.profile-cardh3 {
допуск: 10пикс.;
семейство шрифтов: моноширинный;
размер шрифта: 1.5рем;
}
.profile-cardп: первый тип {
допуск:0px 10пикс.;
семейство шрифтов: 'разНовыйРимский', раз, с засечками;
цвет: васильковый;
}
.profile-cardп:последний тип {
допуск: 5пикс. 10пикс.;
размер шрифта: 0.9рем;
}
.profile-cardа {
украшение текста: никто;
допуск: 5пикс. 10пикс. 10пикс. 10пикс.;
набивка: 5пикс. 15пикс.;
выровнять себя: центр;
граница: 1пикс.твердыйвасильковый;
радиус границы: 15пикс.;
цвет: черный;
семейство шрифтов: моноширинный;
вес шрифта: 500;
}

После стилизации ваши карты должны выглядеть так:

Макет карты и гибкость

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

Использование CSS Flexbox

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

Кроме того, установите выравнивание элементов и выравнивание содержания свойства по вашему желанию.

​​​​​​.card-контейнер {
набивка: 20пикс.;
отображать: сгибаться;
гибкая упаковка: сворачивать;
выравнивание элементов: центр;
выравнивание содержания: пространственно-равномерно;
}

Страница должна выглядеть так:

На этом заканчивается отзывчивость на больших экранах. Для меньшего окна просмотра, такого как мобильный телефон, вы можете использовать правило медиа-запроса и установить максимальную ширину.

В медиа-запросе определите, какие элементы вы хотите изменить. В этом случае изменится контейнер карты.

Установить flex-направление к столбец, поэтому карты складываются вертикально. Чтобы отображать карточки в центре экрана горизонтально, установите для свойств justify-content и align-items значение center:

@СМИ экран и (Максимальная ширина:480 пикселей) {
.card-контейнер {
flex-направление: столбец;
выравнивание содержания: центр;
выравнивание элементов: центр;
 }
}

Чтобы увидеть эффект медиа-запроса, проверьте код на КодПен.

Использование сетки CSS

Во-первых, установите отображение контейнера карты в сетку. Использовать сетка-шаблон-столбцы чтобы карты автоматически регулировали свою ширину. Использовать зазор сетки для расстояния между картами. Использовать выравнивание-элементы для центрирования карт.

.card-контейнер {
набивка: 20пикс.;
отображать: сетка;
сетка-шаблон-столбцы: повторить(автоподгонка, мин Макс(300пикс., 1фр));
зазор сетки: 20пикс.;
выравнивание-элементы: центр;
}

Страница должна выглядеть так:

Для мобильных экранов примените медиа-запрос. В запросе измените макет сетки для меньших окон просмотра. Набор сетка-шаблон-столбцы к 1 франк чтобы каждая карта занимала всю ширину. Кроме того, установка выравнивание-элементы и выравнивание элементов свойства to center будут центрировать карты как по горизонтали, так и по вертикали.

@СМИ экран и (Максимальная ширина:480 пикселей) {
.card-контейнер {
сетка-шаблон-столбцы: 1фр;
выравнивание-элементы: центр;
выравнивание элементов: центр;
 }
}

К объединение CSS Grid и медиазапросов, карточки будут разворачиваться на больших экранах и располагаться вертикально на меньших экранах, обеспечивая адаптивный макет карточки. Чтобы увидеть эффект медиа-запроса, проверьте код на КодПен.

Вопросы доступности для компонентов карты

Крайне важно обеспечить доступность создаваемых компонентов карты для всех пользователей, в том числе для людей с ограниченными возможностями. Вот несколько ключевых соображений, которые помогут сделать компоненты карты более доступными:

• Семантический HTML
• Клавиатурная навигация
• Стили фокусировки
• Метки и роли ARIA
• Альтернативный текст
• Правильная структура заголовка
• Цветовой контраст

Реализуя эти соображения доступности, веб-разработчики могут гарантировать, что компоненты карты включены.

Настройка и дальнейшее исследование

Вы можете пойти дальше, настроив компонент карты. Вот несколько идей, которые вы можете изучить:

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

Существует множество различных способов настройки компонентов карты, так что смело экспериментируйте.

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

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

Вы можете попробовать и другие эффекты CSS, такие как фильтры CSS и режим наложения для визуальных эффектов. Практикуйтесь в создании большего количества различных настроек для визуальной привлекательности.