Как сделать карточку в html

Как сделать карточку товара на CSS

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

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

Демонстрация

Согласно выше описанному порядку, набросаем HTML структуру.

HTML код

Тег section здесь нужен только для выравнивания карточки относительно окна браузера. Сама карточка – это тег div с классом card. Разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. Только вот на полноценной странице сайта, будет много тегов div, поэтому привыкаем присваивать классы.

Куртка джинсовая

3 450 руб.

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

В корзину

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

А теперь будем наводить красоту, а поскольку восприятие красоты очень индивидуально, то сделаем хотя бы аккуратно и опрятно.

CSS стили

Всегда следует обнулять марджины и паддинги, так мы берем их под контроль.

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

section position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

Создание тени (box-shadow) вокруг карточки, хороший способ обрамить карточку, выделить её из остального контента. Первые четыре цифры задают ширину тени, начиная сверху и двигаясь по часовой стрелке. Цвет тени, мы здесь задаем в формате rgba, ради значения 0.2 у альфа канала, чтобы тень была полупрозрачная, едва заметная и мягкая.

.card box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 200px; /* Ограничение ширины */
margin: auto;
text-align: center;
font-family: sans-serif;
>

Фотография на 100% по ширине заполняет свой родитель – карточный блок.

Зададим названию карточки товара фиолетовый цвет.

В параграфе стилизуем описание: создаем поля вокруг текста по 4 пикселя, чтобы не прилипал к краям карточки, размер и цвет шрифта.

p padding: 4px;
font-size: 14px;
color: #757575;
>

Цвет шрифта и размер для цены, выносим в отдельный параграф с классом price.

.price color: #d32f2f;
font-size: 18px;
>

Кнопку «В корзину», делаем самой заметной, но без фанатизма, убираем внешнюю и внутреннюю рамки (border, outline), выравниваем текст по центру (text-align) и растягиваем кнопку на всю ширину карточки (width: 100%). Так, чтобы кнопка была единым целым с карточкой товара, так смотрится гармоничнее, чем целая куча маленьких кнопочек на странице. Ведь карточка товара, обычно не в одном экземпляре находится на сайте.

.card button border: none;
outline: 0;
padding: 10px;
color: #fff;
background-color: #f44336;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>

Наш шедевр готов.

Создано 26.11.2018 10:18:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Карточки

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

Базовая карточка

Чтобы создать базовую карточку, примените классы .card и .card-body к элементу, который определяет внешний контейнер карточки. Также добавьте .card-title к любым элементам заголовка и .card-text к текстовым элементам.

Шапка и подвал

Вы можете добавить шапку и подвал, вставив с .card-header или .card-footer .

Заголовки HTML

Вы также можете применить класс .card-header к любому элементу заголовка HTML (т. е. к элементам — ).

Навигация в заголовке

Вы также можете добавить в карточку навигационные вкладки или пилюли.

Вкладки

Добавьте класс .card-header-tabs к элементу .

Пилюли

Добавьте класс .card-header-pills к элементу .

Содержимое заподлицо (убираем padding)

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

Чтобы создать содержимое заподлицо, не помещайте его в .card-body (потому что он содержит padding). Вместо этого уберите .card-body у внешнего и вложите его внутрь (в свой собственный ). Теперь вы можете поместить содержимое за пределами .card-body (но все ещё внутри .card ). Это эффективно удаляет padding, позволяя содержимому выстраиваться вплотную к краям карточки. При необходимости у вас может быть несколько элементов .card-body .

Обратите внимание, что при использовании содержимого с фиксированной шириной (например, изображений) может потребоваться указать ширину карточки, соответствующую ширине содержимого.

Верх и низ

Содержимое, такое как изображения, может располагаться заподлицо с верхней частью карточки (чтобы верхние углы изображения совпадали со скруглёнными углами карточки). Для этого примените к элементу класс .card-img-top или .card-img-bottom .

Группа списков

Вы можете добавить группы списков в карточки. Используйте класс .list-group-flush , чтобы поместить группы заподлицо с границей карточки.

Ссылки

Выравнивание текста

Вы можете использовать любой из классов выравнивания текста Bootstrap для выравнивания текста внутри карточки. Это .text-left , .text-right , .text-center , .text-justify и .text-nowrap .

Контекстные цвета

Вы можете использовать текстовые и фоновые утилиты Bootstrap для изменения цвета карточки.

Цвет границы

Вы также можете использовать утилиты границ Bootstrap.

Наложение текста

Вы можете применить к карточке изображение, поверх которого появится текст. Для этого добавьте класс .card-img-overlay к текстовому содержимому.