Lecaw

Учимся создавать Web-сайты

Создание веб-элемента для сайта электронной коммерции на CSS3

May 21, 2013
CSS
248hits

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

 ДЕМО

 

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

Для начала, добавьте эту строку в файл 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);
}

Теперь установим иконку, которую мы взяли из Unicons (Bricks UI). Откройте PNG иконку в Photoshop (программные продукты adobe и google chrome) и установите следующий стиль:

Сохраните изображение в формате 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 эффект. Мы создадим 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 на 16px. Затем установите следующие стили:

 

Сохраните иконку в формате 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 x 32px. Затем скопируйте слой и расположите их таким образом:

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

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

Результат должен быть таким:

Сохраните файл в формате 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;
}

 ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий