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 файлов для наших читателей в архиве

СКАЧАТЬ

Вес файла
9.76 Kb

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204