—»     —»   Разработка собственных прейскурантов при помощи HTML5 и CSS3
  Раздел: Руководства   Нет комментариев  

Разработка собственных прейскурантов при помощи HTML5 и CSS3



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

Сегодня мы хотели бы поговорить с вами о процессе разработки собственных прейскурантов при помощи кода HTML5 и CSS3. Несмотря на обозначающий термин в английском языке «pricing table», мы, на самом деле, не использовали ни одного элемента 'table'. Возможно, вы думаете, что при помощи этих элементов подобный компонент было бы гораздо проще создать, однако здесь все очень тесно связано с конкретными требованиями и ситуацией. Прейскуранты ведь могут быть разделены на множество разных ячеек, будь то дополнительные условия, подробная номенклатура комплектации, стоимости и, конечно же, специальная кнопка, которая позволит приобрести или сделать заказ прямо на странице сайта.

Разработка собственных прейскурантов при помощи HTML5 и CSS3

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Приступаем к работе

Это демо в большей степени ориентировано на эстетический вид, поэтому мы не вникали в подробности jQuery-библиотеки. В шапке документа проставлена ссылка на отдельный документ каскадных таблиц под названием styles.css, который в свою очередь импортирует на страницу веб-шрифт Alegreya Sans.

Если же мы посмотрим на внутреннюю таблицу, то увидим, что она реализована при помощи контейнера div, а также при помощи внутренних блочных элементов вроде 'header' и 'section'. Это упрощает сам код и позволяет быстро в нем ориентироваться. И к тому же, мы можем разделять блоки для каждой таблицы, чтобы использовать отдельную стилизацию фона и шрифтов.

<div id="pricing" class="clearfix">
<div class="price-table">
<header>
<h3>Basic</h3>
</header>
<section class="price-details">
<p>$19<span class="price-recur">per month</span></p>
</section>
<section class="details">
<ul class="details-list">
<li class="wizard">Easy Setup Wizard</li>
<li class="storage">250GB Storage</li>
<li class="scripts">Open Source Scripts</li>
<li class="support">24/7 Tech Support</li>
</ul>
</section>
<section class="purchase-btn"><a href="javascript:void(0);">Purchase</a></section>
</div><!-- @end "Basic" .price-table -->

Дабы сэкономить место, мы просто скопировали HTML-код для первого прейскуранта на план «Basic». В шапке на фоне используется градиент, а также немного тени текста, что позволяет выделить этот элемент среди остальных. Подробности о стоимости отделены при помощи span-элемента с классом .price-recur. Так что ценник будет показан гораздо больше, чем указатель временной рамки (per month).

Вы также заметите, что .details-list содержит пункты списка с разными классами. Каждый из них отвечает за разные иконки на фоне, которые были взяты из набора Gentle Edges. PNG-файлы по умолчанию будут белыми, что идеально подходит для этой темной цветовой схемы шаблона.

Внешний контейнер #pricing использует класс clearfix, что позволяет сохранять порядок и выравнивание. Таблицы удерживаются друг за другом при помощи значения width. Если же вы используете адаптивный шаблон, то у вас будет возможность использовать гибкий указатель относительно размеров контейнера. По сути, вы можете отредактировать цифры в CSS-стилях.

Базовые CSS-стили

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

/* page structure */
#w {
display: block;
width: 800px;
margin: 0 auto;
padding: 15px 10px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
}


#pricing {
display: block;
margin-bottom: 20px;
}

.price-table {
display: block;
float: left;
width: 185px;
text-align: center;
color: #fff;
background: #6f8590;
margin-right: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

У каждой внутренней таблицы указана фиксированная ширина 185 пикселей. Вкупе они дают ширину равную 740 пикселям с дополнительным полем величиной в 10 пикселей. Общая ширина оболочки составляет 800 пикселей, поэтому эти ячейки идеально вписываются в эти габариты. К тому же, сама таблица оформлены закругленными углами, которые затем переходят в другие элементы (вроде шапки header).

.price-table header {
display: block;
padding: 15px 0;
border-bottom: 1px solid #54656d;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #5f8597;
background-image: -webkit-gradient(linear, left top, left bottom, from(#324a56), to(#5f8597));
background-image: -webkit-linear-gradient(top, #324a56, #5f8597);
background-image: -moz-linear-gradient(top, #324a56, #5f8597);
background-image: -ms-linear-gradient(top, #324a56, #5f8597);
background-image: -o-linear-gradient(top, #324a56, #5f8597);
background-image: linear-gradient(top, #324a56, #5f8597);
}
.price-table header h3 {
font-size: 2.7em;
font-weight: bold;
text-shadow: 1px 2px 0 rgba(0,0,0,0.3);
}

.price-table .price-details {
padding: 20px 0;
background: #cedee6;
font-size: 4.46em;
line-height: 1.1em;
font-weight: bold;
color: #4b5d72;
margin-bottom: 15px;
text-shadow: 1px 2px 0 rgba(255,255,255,0.6);
}
.price-table .price-details .price-recur {
display: block;
font-size: 0.4em;
line-height: 0.9em;
font-weight: normal;
}

.price-table .details-list {
list-style: none;
text-align: left;
margin-bottom: 10px;
}
.price-table .details-list li {
display: block;
padding: 8px 0;
padding-left: 40px;
font-size: 1.2em;
line-height: 20px;
font-weight: bold;
background-position: 6px 5px;
background-repeat: no-repeat;
border-bottom: 1px solid #a7b7bf;
}

Вы наверняка заметили, что в шапки используется фоновый градиент на CSS3 с браузерными префиксами, что позволяет создать эффект глянца. По мере продвижения по .price-details, фон превращается в единый, а в самой таблице в качестве исходного фона используется темно-серый цвет. Каждая секция разделена, но все вместе они формируют привычный нам вид прейскуранта.

В каждом элементе .details-list li нам нужно сохранить одинаковые свойства фона, однако представить разные изображения. Мы выяснили, что самый простой способ реализации такого эффекта заключается в использовании одинаковых значений background-position и background-repeat values для каждого пункта списка. А затем для отдельных классов использовать разные URL иконок.

Таблица Recommended

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

Шапка таблицы Recommended по высоте меньше остальных, так как сюда мы включили небольшое оповещение для привлечения внимания. Вы можете оформить ее разными лентами или ярлыками, однако мы решили не использовать лишней графике в нашем дизайне. Сама таблица также оформлена дополнительным классом, поэтому у нас есть возможность указывать внутренние элементы при помощи .price-table.recommended в качестве селектора.

.price-table.recommended {
background: #6c7b9b;
}

.price-table.recommended header {
padding: 5px 0;
background-color: #5a76b1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#495e8a), to(#5a76b1));
background-image: -webkit-linear-gradient(top, #495e8a, #5a76b1);
background-image: -moz-linear-gradient(top, #495e8a, #5a76b1);
background-image: -ms-linear-gradient(top, #495e8a, #5a76b1);
background-image: -o-linear-gradient(top, #495e8a, #5a76b1);
background-image: linear-gradient(top, #495e8a, #5a76b1);
border-bottom: 1px solid #3b577e;
}
.price-table.recommended .notice {
font-size: 1.2em;
line-height: 20px;
background: #3b577e;
font-weight: bold;
}

.price-table.recommended .price-details {
background: #bac7ea;
padding: 20px 0;
}

Чтобы компенсировать недостаток пространства, мы сократили отступы в шапке с 30 пикселей до 10. И именно поэтому причине небольшой текст в классом .notice имеет 20 пикселей в качестве значения параметра line-height. Нам хотелось, чтобы две последних таблицы идеально сочетались, даже если они и предлагают слегка разный контент. Цвета фона были изменены практически везде, - в том числе и у кнопки Purchase.

.price-table.recommended .purchase-btn a {
border-color: #6a3fc2 #7045bf #651fbb;
background: #6149ad;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7a67d8), to(#6149ad));
background-image: -webkit-linear-gradient(top, #7a67d8, #6149ad);
background-image: -moz-linear-gradient(top, #7a67d8, #6149ad);
background-image: -ms-linear-gradient(top, #7a67d8, #6149ad);
background-image: -o-linear-gradient(top, #7a67d8, #6149ad);
background-image: linear-gradient(to bottom, #7a67d8, #6149ad);
}
.price-table.recommended .purchase-btn a:hover {
background: #634fc2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8876e2), to(#634fc2));
background-image: -webkit-linear-gradient(top, #8876e2, #634fc2);
background-image: -moz-linear-gradient(top, #8876e2, #634fc2);
background-image: -ms-linear-gradient(top, #8876e2, #634fc2);
background-image: -o-linear-gradient(top, #8876e2, #634fc2);
background-image: linear-gradient(to bottom, #8876e2, #634fc2);
}
.price-table.recommended .purchase-btn a:active {
background: #503d88;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6d58bd), to(#503d88));
background-image: -webkit-linear-gradient(top, #6d58bd, #503d88);
background-image: -moz-linear-gradient(top, #6d58bd, #503d88);
background-image: -ms-linear-gradient(top, #6d58bd, #503d88);
background-image: -o-linear-gradient(top, #6d58bd, #503d88);
background-image: linear-gradient(to bottom, #6d58bd, #503d88);
}

Разработка собственных прейскурантов при помощи HTML5 и CSS3

В завершение

Конечно же, подобные шаблоны нужны не в каждом проекте. По правде говоря, они встречаются в очень редких проектах. Однако есть много компаний, предлагающий специальные сервисы вроде TypeKit или MaxCDN. Также можно найти множество дизайнов, которые действительно будут сочетаться с вашими проектами, и отвечать всем вашим требованиям. Вы можете свободно использовать представленный исходный код в собственных проектах, а также поделиться им с друзьями. Пожалуйста, расскажите, что вы думаете по поводу данного руководства в комментариях?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS
Опубликовал Design FactoRy   Прочитано (раз): 3007   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031