3.04.14, 16:59
0 комментарий
  Уроки

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

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



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

Это демо в большей степени ориентировано на эстетический вид, поэтому мы не вникали в подробности 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);
}



В завершение

Конечно же, подобные шаблоны нужны не в каждом проекте. По правде говоря, они встречаются в очень редких проектах. Однако есть много компаний, предлагающий специальные сервисы вроде TypeKit или MaxCDN. Также можно найти множество дизайнов, которые действительно будут сочетаться с вашими проектами, и отвечать всем вашим требованиям.

BACKUP файлов для наших читателей в архиве

Напишите своё мнение