Как сделать карточку товара на CSS
На этом уроке мы подробно разберем, как сделать карточку товара на CSS. Под карточкой товара, я подразумеваю продающую карточку в интернет-магазинах.
По мере развития электронной коммерции, сложился определенный стандарт, из чего должна состоять карточка товара. Обычно сверху фотография, ниже название товара, цена, описание и кнопка с корзиной.
Демонстрация
Согласно выше описанному порядку, набросаем HTML структуру.
HTML код
Тег section здесь нужен только для выравнивания карточки относительно окна браузера. Сама карточка – это тег div с классом card. Разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. Только вот на полноценной странице сайта, будет много тегов div, поэтому привыкаем присваивать классы.
<section>
<div >
<!— Фотография —>
<img src=»https://myrusakov.ru/jeans.jpg» alt=»Куртка джинсовая»>
<!— Название —>
<h3>Куртка джинсовая</h3>
<!— Цена —>
<p >3 450 руб.</p>
<!— Описание —>
<p>Выполнена из денима и декорирована искусственным мехом.</p>
<!— Корзина —>
<button>В корзину</button>
</div>
</section>
Далее, внутри карточного блока, прописываем все теги по порядку, двигаясь сверху вниз. Пришли мы вот к этому.
А теперь будем наводить красоту, а поскольку восприятие красоты очень индивидуально, то сделаем хотя бы аккуратно и опрятно.
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;
>
Product Card using HTML CSS
Hello guys, we are going to create an Animated Product Card using HTML CSS, and JavaScript. Before I have created lots of product card design by using HTML CSS, Animated Profile Cards is one of them but today we will add Little JavaScript too, and I sure that helps to make out Product Card Template more beautiful
What is a Product Card?
A product card is a sample of the specific product from where the user can choose the product, product’s size, colour and designs as they need. Basically, product card on the webpages helps for users to find products for buying and for the company to sell.
Generally, on the product card design, we add any types details as we want but some major things we must add are:
- High-Resolution Image of Product
- Names and logo of the Product
- Price of the Product
- Add To Cart Button
- Colour and Sizes Option
The image of the Responsive Product Card that you are seen on the webpage is not only a design, but it is also an animated design. I mean that when I clicked on the colour option, the shoe colour changes according to the circle colour.
If you want to watch the real demo of Responsive with Animated Product Card, I highly recommend you to watch the given tutorial of this product card. And another benefit of watching the video tutorial is that you could get an idea of all the codes that I have used on this product card design.
Product Card HTML CSS | Video Tutorial
<iframe width=”560" height=”315" src=”https://www.youtube.com/embed/U9cfXwx-Aeg" title=”YouTube video player” frameborder=”0" allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
As you have seen on the video tutorial of Responsive ANimated Product Card using HTML CSS and JavaSCript. I have added all the major things that are needed in a basic product card design. The main thing that makes this product card more beautiful is the colour changes when we click on the colour option. And we can get that which colour option is active isn’t it?
Actually to make the colour options button active and to change the shoe colour, I have used a little touch of JavaScript. Otherwise, UI design can be made with only HTML and CSS.
In my personal experience, following codes from the video tutorial helps to boost your knowledge and experience better rather than by copying or downloading codes. If you want to get the code of this product card design with animation. I have provided all source code below.
Bootstrap 4 Card — Оформление контента в виде карточки
Card – это компонент Bootstrap 4, который позволяет оформить контент в виде карточки.
Карточка имеет гибкую структуру. Это означает, что её можно представить по-разному, например:
- с заголовком (футером) или без него;
- с использованием картинки (её можно расположить в верхней или нижней части) или без неё;
- с произвольным количеством элементов и их расположением в основной части.
Кроме этого карточке можно ещё очень просто придать нужное цветовое оформление. Задать ей необходимый цвет фона, текста и границ.
Если вы использовали Bootstrap 3, то знаете, что компонента Card в нём нет. Данный компонент появился только в 4 версии и может использоваться в качестве замены таких компонентов Bootstrap 3 как Panels, Wells и Thumbnails.
Создание карточки
Создание карточки осуществляется посредством добавления к HTML элементу, например, div класса card .
После этого содержимое карточки необходимо наполнить нужным контентом.
Основные строительные фрагменты карточки:
- card-body (текстовый контент);
- card-img-top или card-img-bottom (изображение);
- card-img-overlay (текстовый контент над изображением);
- card-header (заголовок);
- card-footer (футер);
- list-group (список).
Добавления к карточке текстового контента (card-body)
Добавление текстового содержимого в карточку осуществляется посредством класса card-body .
Внутри HTML элемента с классом card-body можно использовать следующие классы:
- card-title (для оформления заголовка);
- card-subtitle (для стилизации подзаголовка);
- card-text (для стилизации текста);
- card-link (для оформления ссылок).
Классы mb-2 и text-muted а примере используются для дополнительной стилизации подзаголовка. А именно для того чтобы задать отступ margin-bottom и изменить его цвет.
Добавление к карточке изображения (card-img-top или card-img-bottom)
В карточку можно поместить изображение. Осуществляется это с помощью элемента img и класса card-img-top или card-img-bottom . Класс card-img-top используется, когда изображение необходимо расположить в верхней области карточки, а card-img-bottom – в нижней части.
Добавление к карточке фона (card-img-overlay)
Изображение также можно использовать для создания фона карточки.
В этом варианте карточки текстовый контент будет накладываться на изображение. В зависимости от изображения вам для оформления текстового контента возможно потребуется добавить к нему дополнительные стили.
Добавления к карточке списка в табличном виде
Добавление в карточку списка List groups осуществляется следующим образом:
Добавление к карточке шапки и (или) футера
Добавление к карточке шапки (header) осуществляется с помощью класса card-header . Его, например, можно добавить к элементу div или h* .
Добавление в карточку футера осуществляется посредством класса card-footer .
Карточка с навигацией (в заголовке)
Добавить навигацию в заголовок карточки можно с помощью компонента Nav.
Смешивание фрагментов карточки
Вышеперечисленные строительные фрагменты карточки можно смешивать.
Например, спроектируем карточку, состоящую из:
- card-img-top (изображения);
- card-body (текстовых контентов);
- list-group (списка).
Кроме элементов специально предназначенных для карточки, в ней можно размещать и другие элементы (например, форму):
Размеры карточки
Карточка по умолчанию занимает всю доступную ширину (100%) элемента, в которую она помещена.
Установить размеры карточке можно с помощью классов сетки, вспомогательных классов Bootstrap, CSS и др. способами.
Например, определим ширину карточек с помощью классов сетки Bootstrap:
На крохотных и маленьких экранах карточки будут располагаться вертикально (1×4), на средних экранах 2×2, а на больших — на одной горизонтальной линии (4×1).
Например, определим ширину карточек с помощью вспомогательного класса Bootstrap 4 w-* :
Установить необходимый размер карточки также можно с помощью CSS (например, посредством свойства width ):
Выравнивание текстового контента карточки
Выровнять текстовое содержимое карточки или её части можно с помощью следующих дополнительных классов Bootstrap 4:
- text-left (по умолчанию) — по левому краю;
- text-right – по правому краю;
- text-center – по центру.
Цветовая настройка карточки
Карточке можно очень просто придать нужное цветовое оформление.
Осуществляется это с помощью следующих вспомогательных классов Bootstrap 4:
- bg-{color} (например: bg-primary , bg-secondary , bg-success , bg-transparent и др.) – для установки цвета фона;
- border-{color} (например: border-primary , border-secondary , border-success , border-danger и др.) – для установки цвета границам;
- text-{color} (например: text-white , text-dark , text-primary , text-secondary , text-success и др.) – для установки цвета тексту.
Макеты для организации коллекции карточек
Bootstrap 4 имеет следующие классы для организации коллекции карточек:
- card-group — представляет набор карточек в виде одного блока (карточки прикреплены друг к другу и имеют одинаковый размер);
- card-deck — делает карточки одинаковой ширины и высоты, но не прикреплёнными друг к другу;
- card-columns — предназначен для организации карточек в виде кирпичной кладки Masonry, упорядочиваются они сверху вниз и слева направо (в этом варианте карточки выстроены не с помощью flexbox, а посредством CSS-свойства column ).
Макеты для организации коллекции карточек являются пока ещё (в версии Bootstrap 4 Beta 2) не адаптивными.
В макете организованном с помощью класса card-columns можно очень просто настроить и изменить количество колонок на различных контрольных точках сетки:
Как с помощью компонента Card создать Panels
Пример, как с помощью Bootstrap 4 Card можно очень просто создать элемент интерфейса Bootstrap 3 Panels.
Как сделать карточку в html
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
This pattern is a list of «card» components with optional footers.
Requirements
The card component can contain a variety of content, including a heading, image, content and a footer.
Each card should be the same height, and footers should stick to the bottom of the card.
When added to a collection of cards, the cards should line up in two dimensions.
Recipe
Choices made
The card is laid out using CSS Grid Layout despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks. When setting up the single column grid I use the following:
The heading track is set to max-content , which prevents it from stretching. I have decided that I want my image to live within a track that is 200 pixels tall. I then set the next track — which is where the content lives — to 1fr . This means it will take up any additional space.
If the track does have a footer it will be auto-sized, as rows created in the implicit grid are auto-sized by default. Therefore this will fit the content added to it.
Note: The various elements in separate cards do not align with each other, as each card is an independent grid. The proposed subgrid feature of Grid Level 2 would give a solution to this issue.
Useful fallbacks or alternative methods
Flexbox could be used to lay out the card, in which case you should make the content area grow, and other items not grow. This would be a reasonable way to lay out the card, although I have a slight preference for being able to control the tracks from the container rather than needing to add rules to the items.
For the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above. Alternatively you could use CSS multi-col — this would cause the cards to lay out down the columns, which may or may not be a problem.
See the columns recipe for demonstrations of each of these layout methods.
Accessibility concerns
Depending on the content of your card there may be things you could, or should do to enhance accessibility. See Inclusive Components: Card by Heydon Pickering, for a very detailed explanation of these issues.