Главная
»
Уроки
»
Дизайн карточек товара интернет-магазина

Дизайн карточек товара интернет-магазина

Опубликовано: 13 декабря 2015 Обновлено: 18 января 2021 6 комментариев

Продажа товаров через Интернет приобретает все большую популярность. Карточка товара (product card) представляет собой детальное описание продукта вместе с функциональными элементами (кнопка «купить/добавить в корзину», доступные цвета, размеры и т.д.).

Функциональность карточки товара можно расширить дополнительными кнопками, а с помощью трансформаций и переходов придать элементам динамичность.

Перейти на страницу с примерами

Пример 1

<div class="product-item">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
      <span class="price">₽ 1999</span>
      <a href="" class="button">В корзину</a>
  </div>
</div>

* {
   box-sizing: border-box;
}
.product-item {
   width: 300px;
   text-align: center;
   margin: 0 auto;
   border-bottom: 2px solid #F5F5F5;
   background: white;
   font-family: "Open Sans";
   transition: .3s ease-in;
}
.product-item:hover {
   border-bottom: 2px solid #fc5a5a;
}
.product-item img {
   display: block;
   width: 100%;
}
.product-list {
   background: #fafafa;
   padding: 15px 0;
}
.product-list h3 {
   font-size: 18px;
   font-weight: 400;
   color: #444444;
   margin: 0 0 10px 0;
}
.price {
   font-size: 16px;
   color: #fc5a5a;
   display: block;
   margin-bottom: 12px;
}
.button {
   text-decoration: none;
   display: inline-block;
   padding: 0 12px;
   background: #cccccc;
   color: white;
   text-transform: uppercase;
   font-size: 12px;
   line-height: 28px;
   transition: .3s ease-in;
}
.product-item:hover .button {
   background: #fc5a5a;
}

Пример 2

<div class="product-item">
  <div class="product-img">
    <a href="">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    </a>
  </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="stars"></div>
    <span class="price">₽ 1999</span>
    <div class="actions">
      <div class="add-to-cart">
        <a href="" class="cart-button">В корзину</a>
      </div>
      <div class="add-to-links">
        <a href="" class="wishlist"></a>
        <a href="" class="compare"></a>
      </div>
      </div>
    </div>
</div>

* {
   box-sizing: border-box;
}
.product-item {
   width: 300px;
   margin: 0 auto;
   padding: 10px 10px 5px 10px;
   border: 1px solid #eee;
   background: white;
   font-family: "Open Sans";
   overflow: hidden;
   transition: .4s linear;
}
.product-img {
   transition: 1s ease-in-out;
}
.product-img:hover {
   transform: scale(1.1);
}
.product-img img {
   display: block;
   width: 100%;
}
.product-list {
   margin-top: 15px;
}
.product-list h3 {
   font-weight: 700;
   color: #39404B;
   margin: 0;
   text-transform: uppercase;
   font-size: 14px;
   line-height: 2;
}
.price {
   color: #E34D38;
   display: block;
   margin-bottom: 12px;
}
.stars {
   height: 14px;
   line-height: 14px;
   margin: 7px 0;
}
.stars:before {
   content: "\f005\f005\f005\f005\f006";
   color: #EFB71C;
   font-size: 14px;
   font-family: FontAwesome;
}
.actions {
   border-top: 1px solid #eee;
   padding-top: 4px;
   font-size: 13px;
   height: 30px;
   line-height: 30px;
}
.actions:after {
   content: "";
   display: table;
   clear: both;
}
.add-to-cart, .add-to-links {
   float: left;
}
.cart-button {
   text-decoration: none;
   color: #8C877C;
   padding-right: 20px;
   border-right: 1px solid #ddd;
   transition: .4s linear;
}
.cart-button:before {
   content: "\f07a";
   font-family: FontAwesome;
   margin-right: 10px;
}
.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover {
   color: #E34D38;
}
.wishlist, .compare {
   color: #8C877C;
   padding-left: 20px;
   transition: .4s linear;
}
.wishlist:after, .compare:after {
   display: inline-block;
   font-family: FontAwesome;
   font-size: 13px;
}
.wishlist:after {
   content: "\f004";
}
.compare:after {
   content: "\f079";
}

Пример 3

<div class="product-wrap">
  <div class="product-item">
    <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    <div class="product-buttons">
      <a href="" class="button">В корзину</a>
    </div>
  </div>
  <div class="product-title">
    <a href="">Маленькое черное платье</a>
    <span class="product-price">₽ 1999</span>
  </div>
</div>

* {
   box-sizing: border-box;
}
.product-wrap {
   width: 300px;
   margin: 0 auto;
   background: white;
   padding: 0 0 20px;
   text-align: center;
   font-size: 14px;
   font-family: Lora;
   text-transform: uppercase;
}
.product-item {
   position: relative;
   overflow: hidden;
}
.product-wrap img {
   display: block;
   width: 100%;
}
.product-buttons {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .8);
   opacity: 0;
   transition: .3s ease-in-out;
}
.button {
   text-decoration: none;
   color: #c0a97a;
   font-size: 12px;
   width: 140px;
   height: 40px;
   line-height: 40px;
   position: absolute;
   top: 50%;
   left: 50%;
   border: 2px solid #c0a97a;
   transform: translate(-50%, -50%) scale(0);
   transition: .3s ease-in-out;
}
.button:before {
   content: "\f07a";
   font-family: FontAwesome;
   margin-right: 10px;
}
.product-item:hover .product-buttons {
   opacity: 1;
}
.product-item:hover .button {
   transform: translate(-50%, -50%) scale(1);
}
.button:hover {
   background: black;
}
.product-title {
   color: #5e5e5e;
}
.product-title a {
   text-decoration: none;
   color: #2e2e2e;
   font-weight: 600;
   margin: 15px 0 5px;
   padding-bottom: 7px;
   display: block;
   position: relative;
   transition: .3s ease-in-out;
}
.product-title a:after {
   content: "";
   position: absolute;
   width: 40px;
   height: 2px;
   background: #2e2e2e;
   left: 50%;
   margin-left: -20px;
   bottom: 0;
   transition: .3s ease-in-out;
}
.product-title a:hover {
   color: #c0a97a;
}
.product-title:hover a:after {
   background: #c0a97a;
}
.product-price {
   font-size: 20px;
   color: #c0a97a;
   font-weight: 700;
}

Пример 4

<div class="product-inner">
  <div class="product-wrap">
    <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
    <div class="actions">
      <a href="" class="add-to-cart"></a>
      <a href="" class="quickview"></a>
      <a href="" class="wishlist"></a>
  </div>
  </div>
  <div class="product-info">
    <h3 class="product-title"><a href="">Маленькое черное платье</a></h3>
    <span class="price">₽ 1999</span>
  </div>
</div>

* {
   box-sizing: border-box;
}
.product-inner {
   width: 300px;
   margin: 0 auto;
   background: white;
   text-align: center;
   border-bottom: 2px solid #ebebec;
   transition: .2s linear;
}
.product-inner:hover {
   border-color: #bca480;
}
.product-wrap {
   position: relative;
   overflow: hidden;
   margin-bottom: 15px;
}
.product-wrap img {
   display: block;
   width: 100%;
}
.actions {
   position: absolute;
   left: 0;
   bottom: -20%;
   width: 100%;
   background: rgba(59, 62, 67, 0.75);
   transition: .3s linear;
}
.product-inner:hover .actions {
   bottom: 0;
}
.actions a {
   text-decoration: none;
   float: left;
   width: 33.33333333333333%;
   color: white;
   padding: 15px 0;
   transition: .2s linear;
}
.actions a:hover {
   background: rgba(59, 62, 67, 0.85);
}
.actions a:before {
   font-family: "FontAwesome";
}
.add-to-cart:before {
   content: "\f07a";
}
.quickview:before {
   content: "\f002";
}
.wishlist:before {
   content: "\f08a";
}
.product-info {
   padding-bottom: 10px;
   font-family: 'Noto Sans', sans-serif;
}
.product-title {
   margin: 0 0 10px 0;
   font-family: 'Noto Sans', sans-serif;
}
.product-title a {
   text-decoration: none;
   color: #1e1e1e;
   font-weight: 400;
   font-size: 16px;
}
.price {
   font-weight: bold;
   color: #bca480;
}

Пример 5

<div class="item">
  <div class="product">
    <div class="thumb-img">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
      <div class="actions">
        <a href="" class="share-button"><i class="fa fa-search"></i></a>
        <span class="share-wrap">
          <a href="" class="share-button"><i class="fa fa-cloud"></i></a>
          <span class="share-item">
            <a class="share-button" href=""><i class="fa fa-facebook"></i></a>
            <a class="share-button" href=""><i class="fa fa-twitter"></i></a>
            <a class="share-button" href=""><i class="fa fa-google-plus"></i></a>
            <a class="share-button" href=""><i class="fa fa-pinterest-p"></i></a>
          </span>
        </span>
        <a href="" class="share-button"><i class="fa fa-heart-o"></i></a>
        <a href="" class="add-to-cart">В корзину</a>
      </div>
    </div>
    <div class="product-about">
      <h3 class="product-title">
        <a href="">Маленькое черное платье</a>
      </h3>
      <span class="price"><i class="fa fa-rub"></i>1999</span>
    </div>
  </div>
</div>

* {
   box-sizing: border-box;
}
.item {
   width: 300px;
   border: 1px solid rgba(0, 0, 0, .08);
   padding: 15px 0;
   margin: 0 auto;
   background: white;
}
.item a {
   text-decoration: none;
   outline: 0;
}
.product {
   padding: 0 15px;
   position: relative;
}
.thumb-img {
   position: relative;
   overflow: hidden;
}
.thumb-img img {
   width: 100%;
   display: block;
}
.thumb-img:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, .5);
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .thumb-img:after {
   opacity: 1;
}
.actions {
   position: absolute;
   z-index: 2;
   top: 100%;
   left: 0;
   right: 0;
   padding: 0 15px;
   text-align: center;
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .actions {
   top: 50%;
   opacity: 1;
}
.actions a {
   margin: 7px 6px;
   color: white;
   height: 30px;
   line-height: 26px;
   display: inline-block;
   border-radius: 30px;
   font-size: 12px;
   text-transform: uppercase;
   text-align: center;
   border: 2px solid white;
   background: transparent;
   transition: .3s ease-in-out;
}
.share-button {
   width: 30px;
}
.add-to-cart:hover {
   background: #A2927F;
}
.actions a:hover {
   border-color: #A2927F;
   background: #A2927F;
}
.share-wrap {
   display: inline-block;
   height: 30px;
   position: relative;
   margin: 7px 6px;
}
.share-item {
   width: 200px;
   margin-left: -100px;
   position: absolute;
   z-index: 3;
   bottom: 38px;
   left: 50%;
   opacity: 0;
   visibility: hidden;
   text-align: center;
   transition: .3s ease-in-out;
}
.share-wrap:hover .share-item {
   opacity: 1;
   visibility: visible;
}
.add-to-cart {
   padding: 0 20px;
}
.product-about {
   padding: 20px 0 0;
   text-align: center;
}
.product-title {
   font-family: 'Open Sans', sans-serif;
   line-height: 1.1;
   font-size: 16px;
   margin: 5px 0 15px;
   font-weight: normal;
}
.product-title a {
   color: #373737;
}
.price {
   font-family: 'Open Sans', sans-serif;
   font-size: 1.25em;
   font-weight: bold;
   color: #F2453E;
}

Пример 6

<div class="border">
  <div class="wrap">
    <div class="product-wrap">
      <a href=""><img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg"></a>
    </div>
    <div class="loop-action">
      <a href="" class="add-to-cart">Быстрый просмотр</a>
      <a href="" class="loop-add-to-cart">В корзину</a>
    </div>
  </div>
    <div class="product-info">
      <div class="stars"></div>
      <h3 class="product-title">Маленькое черное платье</h3>
      <div class="price">&#8381; 1999</div>
   </div>
</div>

* {
   box-sizing: border-box;
}
.border {
   width: 300px;
   margin: 0 auto;
   background: white;
   padding: 20px;
   border: 1px solid #F1E7E8;
}
.wrap {
   height: 100%;
   position: relative;
}
.product-wrap {
   position: relative;
}
.product-wrap:after {
   content: '';
   background: rgba(73, 102, 162, .5);
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   opacity: 0;
   transform: scale(.3);
   transition: .3s ease-in-out;
}
.border:hover .product-wrap:after {
   opacity: 1;
   transform: scale(1);
}
.product-wrap a {
   display: block;
   text-decoration: none;
}
.product-wrap img {
   display: block;
   width: 100%;
}
.loop-action {
   position: absolute;
   left: 50%;
   top: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
   transition: .3s ease-in-out;
}
.border:hover .loop-action {
   opacity: 1;
}
.loop-action a {
   text-decoration: none;
   display: block;
   border: 1px solid white;
   white-space: nowrap;
   text-transform: uppercase;
   padding: .5em 1em;
   font-size: 14px;
   line-height: 1.6;
   outline: none;
   position: relative;
   overflow: hidden;
   text-align: center;
   color: white;
   min-width: 160px;
   margin: 5px auto;
   transition: .3s ease-in-out;
}
.loop-action a:after {
   content: '';
   position: absolute;
   left: -220%;
   top: -500%;
   width: 140%;
   height: 1000%;
   transform: rotate(45deg);
   background: white;
   z-index: -1;
   transition: .3s ease-in-out;
}
.loop-action a:hover {
   color: black;
}
.loop-action a:hover:after {
   left: 0%;
}
.border:hover {
   border-color: #4966A2;
}
.product-info {
   padding-top: 15px;
}
.stars {
   font-size: 14px;
   font-family: FontAwesome;
}
.stars:before {
   content: "\f005\f005\f005\f005\f123";
   color: #F2453E;
}
.product-title {
   font-weight: normal;
   font-family: "Open Sans";
   color: #162546;
   font-size: 18px;
}
.price {
   font-family: "Open Sans";
   color: #162546;
   font-style: italic;
   font-weight: bold;
}

Пример 7

<div class="product-wrap">
  <div class="product-image">
    <a href="">
      <img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg">
      <div class="shadow"></div>
    </a>
    <a class="detail-link" href="" title="Быстрый просмотр"></a>
    <div class="actions">
      <div class="actions-btn">
        <a class="add-to-cart" href="" title="Добавить в корзину"></a>
        <a class="add-to-wishlist" href="" title="Добавить в мои желания"></a>
        <a class="add-to-compare" href="" title="Добавить для сравнения"></a>
      </div>
    </div> 
  </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="price">&#8381; 1999</div>
  </div>
</div>

.product-wrap {
   width: 300px;
   text-align: center;
   margin: 0 auto;
   background: white;
}
.product-image {
   position: relative;
   overflow: hidden;
}
.product-image a {
   display: block;
}
.product-image img {
   display: block;
   width: 100%;
}
.shadow {
   background: rgba(0, 0, 0, 0.3);
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: .3s ease-in-out;
}
.product-wrap:hover .shadow {
   opacity: 1;
}
.detail-link {
   text-decoration: none;
   width: 50px;
   height: 50px;
   background: #ff7659;
   border-radius: 3px;
   opacity: 0;
   position: absolute;
   left: 50%;
   top: 50px;
   transform: translate(-50%, -50%) rotate(45deg);
   transition: .3s ease-in-out;
}
.detail-link:before {
   content: "\f06e";
   font-family: FontAwesome;
   color: white;
   font-size: 20px;
   display: block;
   height: 50px;
   line-height: 50px;
   width: 50px;
   transform: rotate(-45deg);
   transition: .3s ease-in-out;
}
.product-wrap:hover .detail-link {
   opacity: 1;
   top: 50%;
}
.actions {
   width: 100%;
   height: 47px;
   position: absolute;
   bottom: -47px;
   right: 0;
   opacity: 0;
   transition: 0.5s ease-in-out;
}
.product-wrap:hover .actions {
   bottom: 0;
   opacity: 1;
}
.actions-btn {
   float: right;
}
.actions-btn a {
   display: inline-block;
   background: white;
   color: #555;
   width: 47px;
   height: 47px;
   line-height: 47px;
   text-decoration: none;
   transition: .3s ease-in-out;
}
.actions-btn a:hover {
   background: #ff7659;
   color: white;
}
.actions-btn a:after {
   font-family: FontAwesome;
   font-size: 14px;
}
.add-to-cart:after {
   content: "\f07a";
}
.add-to-wishlist:after {
   content: "\f004";
}
.add-to-compare:after {
   content: "\f079";
}
.product-list {
   margin: 20px 0;
   font-family: 'Open Sans', serif;
}
.product-list h3 {
   color: #555;
   font-size: 15px;
}
.price {
   font-weight: bold;
   font-size: 18px;
   color: #ff7659;
}

Пример 8

<div class="product-wrap">
  <div class="product-image">
    <a href=""><img src="https://html5book.ru/wp-content/uploads/2015/10/black-dress.jpg"></a>
    <div class="shadow"></div>
    <div class="actions">
      <div class="actions-btn">
        <div class="add-to-cart">
          <a class="add-to-cart-button" href="#" title="Добавить в корзину"></a>
        </div>
        <div class="add-to-links">
          <div class="add-to-wishlist">
            <a class="add-to-wishlist-button" href="#" title="Добавить в мои желания"></a>
          </div>
          <div class="add-to-compare">
            <a class="add-to-compare-button" href="#" title="Добавить для сравнения"></a>
          </div>
          <div class="quikview">
            <a class="quikview-button" href="#" title="Быстрый просмотр"></a>
          </div>
          </div>
        </div>
      </div>
    </div>
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
    <div class="price">&#8381; 1999</div>
  </div>
</div>

* {
   box-sizing: border-box;
}
.product-wrap {
   width: 300px;
   text-align: center;
   background: white;
   margin: 0 auto;
}
.product-image {
   position: relative;
}
.product-image a {
   display: block;
}
.product-image img {
   display: block;
   width: 100%;
}
.shadow {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .1);
   opacity: 0;
   transition: 0.5s ease-in-out;
}
.product-wrap:hover .shadow {
   opacity: 1;
}
.actions {
   bottom: 15px;
   right: 15px;
   position: absolute;
}
.add-to-cart {
   opacity: 0;
   visibility: hidden;
   transform: translate(0, -50px);
   transition: 1s ease-in-out;
}
.actions a {
   background: #202020;
   color: white;
   display: block;
   height: 36px;
   line-height: 36px;
   width: 42px;
   transition: .3s ease-in-out;
   text-decoration: none;
}
.actions a:before {
   font-family: FontAwesome;
   font-size: 14px;
}
.add-to-cart-button:before {
   content: "\f07a";
}
.add-to-wishlist-button:before {
   content: "\f004";
}
.add-to-compare-button:before {
   content: "\f079";
}
.quikview-button:before {
   content: "\f002";
}
.actions a:hover {
   background: #67BFA6;
}
.product-wrap:hover .add-to-cart {
   opacity: 1;
   visibility: visible;
   transform: translate(0, 0);
}
.add-to-wishlist {
   opacity: 0;
   visibility: hidden;
   transform: translate(0, -50px);
   transition: .8s ease-in-out;
   margin: 9px 0 0;
}
.product-wrap:hover .add-to-wishlist, .product-wrap:hover .add-to-compare, .product-wrap:hover .quikview {
   opacity: 1;
   visibility: visible;
   transform: translate(0, 0);
}
.add-to-compare {
   opacity: 0;
   position: relative;
   visibility: hidden;
   transition: .6s ease-in-out;
   transform: translate(0, -50px);
   margin: 9px 0 0;
}
.quikview {
   opacity: 0;
   visibility: hidden;
   transition: .4s ease-in-out;
   transform: translate(0, -50px);
   margin: 9px 0 0;
}
.product-list {
   margin-top: 20px;
   padding-bottom: 20px;
   text-align: center;
   font-family: 'Open Sans', serif;
}
.product-list h3 {
   color: #555;
   font-size: 15px;
   font-family: 'Open Sans', serif;
}
.price {
   font-weight: bold;
   font-size: 16px;
   color: #ff7659;
}

Оформление многоуровневых нумерованных списков

Оформление таблицы с помощью псевдоклассов