Верстка карточки товара для интернет магазина на CSS3

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

Сложность

Шаг 1. HTML разметка

Для начала подключим шрифт “Open Sans” от Google Web Fonts:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>

Создадим основной контейнер с классом block. Внутри которого расположены еще три контейнера: первый показывает миниатюру товара и две кнопки (product), второй контейнер содержит информацию о товаре (info) и последний содержит дополнительные детали, например, рейтинг товара:

<div class="block">
    <div class="product">
        <img src="/img/product.jpg">
            <div class="buttons">
            <a class="buy" href="#">Add to cart</a>
            <a class="preview" href="#">View item</a>
        </div>
    </div>
 
    <div class="info">
        <h4>Armillaria luteobubalina is a species of mushroom</h4>
        <span class="description">
            Rwanda is a country in central and eastern Africa located a few degrees south of the Ecuator.
        </span>
        <span class="price">$62.97</span>
        <a class="buy_now" href="#">Buy Now</a>
    </div>
 
    <div class="details">
        <span class="time">12 hours ago</span>
        <ul class="rating">
            <li class="rated"></li>
            <li class="rated"></li>
            <li class="rated"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Шаг 2. Основной стиль

Начнем с основного контейнера: зададим для него ширину со значением 295px, добавим закругленные углы, белый фон и тонкую тень.

.block {
    display: block;
    position: relative;
    width: 295px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

Теперь, контейнер, который содержит изображение предварительного просмотра:

.product {
    display: block;
    position: relative;
}

Для полноразмерного изображения также установим закругленные углы, а размер изображения будет варьироваться в зависимости от ширины его контейнера:

.product img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

Контейнер с информацией о товаре:

.info {
    display: block;
    position: relative;
    padding: 20px;
}
 
.details {
    border-top: 1px solid #e5e5e5;
    padding: 18px 20px;
}

Шаг 3. Предварительный просмотр и кнопки

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

.buttons {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: rgba(255, 255, 255, .5);
    opacity: 0;
    -webkit-transition: opacity .25s ease-in;
    -ms-transition: opacity .25s ease-in;
    -moz-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
}
 
.product:hover .buttons, .product:hover a {
    opacity: 1;
}

Далее основные стили кнопок:

.buttons a {
    display: block;
    position: absolute;
    left: 50px;
    width: 115px;
    border-radius: 2px;
    padding: 15px 10px 15px 65px;
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    opacity: 0;
}

Для расположения иконок, будем использовать псевдо-элементы:

.buttons a::after {
    content: "";
    display: block;
    position: absolute;
    height: 48px;
    width: 50px;
    border-right: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .17);
    top: 0;
    left: 0;
    z-index: 1;
}

Теперь стилизуем каждую кнопку по отдельности. Кнопка "Add to cart" имеет полупрозрачный черный фон и будет смещена по вертикали в процентном соотношении, потому что у миниатюр есть фиксированная ширина, но их высота переменная:

a.buy {
    top: 20%;
    background: #414141;
    background: rgba(0, 0, 0, .85);
    -webkit-transition: background .2s ease-in;
    -ms-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    transition: background .2s ease-in;
}

При наведении, фон будет меняться на более светлый:

.buy:hover {
    background: #515151;
    background: rgba(45, 45, 45, .85);
}

Теперь откройте PNG иконку в Photoshop и установите следующий стиль:

Сохраните изображение в формате PNG. Теперь, установим иконку в виде фонового изображения кнопки при помощи псевдо-элемента:

.buy::after {
    background: url("../img/cart-icon.png");
    background-repeat: no-repeat;
    background-position: 16px 18px;
}

Перейдем к кнопке "View Item". Обратите внимание, что кнопка "Add to cart" меняет цвет фона при наведении. К сожалению, у этой кнопки установлен градиент в качестве фона, поэтому переходы не будут работать. Так как решить эту ситуацию? Мы собираемся увеличить размер фона, так, чтобы он был больше чем сама кнопка, для этого мы воспользуемся свойством background-position, чтобы переместить фоновый градиент при наведении. Кроме того, кнопка должна иметь тонкий 3D эффект, мы создадим его при помощи box-shadow и CSS transforms.

a.preview {
    bottom: 20%;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
 
    background: #286398;
    background: -webkit-linear-gradient(bottom, #1d4970, #639ed3);
    background: -ms-linear-gradient(bottom, #286398, #639ed3);
    background: -moz-linear-gradient(bottom, #286398, #639ed3);
    background: -o-linear-gradient(bottom, #286398, #639ed3);
    background-position: 0 -15px;
    background-size: 400px 80px;
    background-repeat: no-repeat;
    box-shadow: 0 2px 0 #165181;
 
    -webkit-transition: background-position .2s ease-in;
    -ms-transition: background-position .2s ease-in;
    -moz-transition: background-position .2s ease-in;
    -o-transition: background-position .2s ease-in;
    transition: background-position .2s ease-in;
}
 
.preview:hover, .buy_now:hover {
    background-position: 0 0;
}
 
.preview:active, .buy_now:active {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -o-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: none;
}

Обратите внимание, что кнопка "View Item" заимствует некоторые стили от кнопки buy_now. Далее мы добавим иконку. Откройте файл "eye.png" в Photoshop, нажмите Ctrl/Cmd + Alt + C или перейдите в Image > Canvas Size и увеличьте размер холста до 16х16. Затем установите следующие стили:

 

Сохраним иконку в формате PNG и установим её в качестве фона:

.preview::after {
    background: url("../img/eye-icon.png");
    background-repeat: no-repeat;
    background-position: 16px 17px;
}

Шаг 4. Описание товара

В предварительном просмотре, есть небольшой треугольник у основания изображения товара/элемента. Для создание такого треугольника будем использовать псевдо-элемент ::after. Треугольник фактически будет квадратом, повернутым на 45 градусов, используя CSS transforms:

.info::after {
    display: block;
    position: absolute;
    top: -12px;
    left: 23px;
    content: "";
    width: 15px;
    height: 15px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Стилизуем название товара, добавим синюю полоску в нижней части, используя псевдо-элемент ::after:

.info h4 {
    position: relative;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 25px;
    color: #372f2b;
    letter-spacing: -1px;
}
 
.info h4::after {
    display: block;
    position: absolute;
    bottom: 0px;
    content: "";
    width: 40px;
    height: 2px;
    background: #3b86c4;
}

Стиль описание элемента:

.info .description {
    display: block;
    padding-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #5f5f5f;
}

Цена товара:

.info .price {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #372f2b;
    line-height: 26px;
}

Кнопка "Buy Now":

.buy_now {
    float: right;
    position: relative;
    top: -5px;
    display: block;
    padding: 10px 10px;
    border-radius: 3px;
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
 
    background: #286398;
    background: -webkit-linear-gradient(bottom, #1d4970, #639ed3);
    background: -ms-linear-gradient(bottom, #286398, #639ed3);
    background: -moz-linear-gradient(bottom, #286398, #639ed3);
    background: -o-linear-gradient(bottom, #286398, #639ed3);
    background-position: 0 -15px;
    background-size: 400px 80px;
    background-repeat: no-repeat;
 
    -webkit-transition: background-position .2s ease-in;
    -ms-transition: background-position .2s ease-in;
    -moz-transition: background-position .2s ease-in;
    -o-transition: background-position .2s ease-in;
    transition: background-position .2s ease-in;
 
    box-shadow: 0 2px 0 #165181;
}

Шаг 5. Дополнительные детали

В последнем шаге мы перейдем к дополнительным деталям, таким как, время добавления товара и оценка. Откроем иконку часов от Unicons и установим следующий стиль:

Сохраните иконку в формате PNG и установите её в качестве фона для элемента span:

.time {
    padding-left: 25px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #372f2b;
    background: url("../img/clock-icon.png") no-repeat;
    background-position: 0 2px;
}

Теперь, давайте перейдем к системе оценок, мы будем использовать неупорядоченный список. Принцип которого довольно прост. По умолчанию у каждого элемента списка будет серая звезда в качестве фона. Если у товара будет четыре звезды, то первые четыре элемента списка изменят класс и установят желтую звезду в качестве фона. Создадим спрайтовое изображение для звезд. Откройте иконку звезды в Photoshop и увеличьте размер холста 16х32. Затем скопируйте слой и расположите здвезды следующим образом:

Добавьте стиль для верхнего слоя:

Стиль для нижнего слоя:

Результат:

Сохраните файл в формате PNG. Немного отформатируем неупорядоченный список. Удалим свойства margin и padding:

.rating {
    position: relative;
    top: 2px;
    float: right;
    margin: 0;
    padding: 0;
}

Перейдем к элементам списка. Установим наше фоновое изображение:

.rating li {
    float: left;
    display: block;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    background: url("stars.png") no-repeat 0 0;
}
 
.rating li.rated {
    background-position: 0px -16px;
}
ДЕМО СКАЧАТЬ

 

Перевод статьи Create an E-Commerce Web Element with CSS3

Тэги: ecommercefrontend

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.