<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

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

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

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

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

HTML код

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

<section>
<div class="card">
<!— Фотография -->
  <img src="jeans.jpg" alt="Куртка джинсовая">
<!— Название -->
  <h3>Куртка джинсовая</h3>
<!— Цена -->
  <p class="price">3 450 руб.</p>
<!— Описание -->
  <p>Выполнена из денима и декорирована искусственным мехом.</p>
<!— Корзина -->
  <button>В корзину</button>
</div>
</section>

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

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

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

CSS стили

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

* {
  padding: 0;
  margin: 0;
}

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

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% по ширине заполняет свой родитель – карточный блок.

img {
  width: 100%;
}

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

h3 {
  color: #7c4dff;
}

В параграфе стилизуем описание: создаем поля вокруг текста по 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;
}

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

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

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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