Skip to content

Создаем отзывчивый прейскурант с эффектами при наведении

Привет, друзья! Сегодня продолжим наш рассказ про адаптивный дизайн. Таблицы цен (или прейскурант) очень часто добавляют в разные шаблоны и дизайны. Если вы захотите создавать какой-нибудь дизайн, вам придется тоже их сделать. Но есть одна проблема — таблицы сложно сделать резиновыми. Решение данной проблемы мы рассмотрим в данном уроке.

Резиновая таблица цен
Финальный результат

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

Макет

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

responsive-table-1

HTML

Начнем мы с пустого документа. Очень важным будет указать мета-тег viewport, который позволяет всем устройствам правильно интерпретировать наш резиновый макет.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Теперь мы можем начать разметку таблицы (или, точнее, разметку списка):

<ul class="pricing_table">
<li>...</li>
<li class="price_block">
<h3>Basic</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$9.99</span>
<span class="price_tenure">per month</span>
</div>
</div>
<ul class="features">
<li>2GB Storage</li>
<li>5 Clients</li>
<li>10 Active Projects</li>
<li>10 Colors</li>
        <li>Free Goodies</li>
        <li>24/7 Email support</li>
    </ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li>...</li>
<li>...</li>
</ul>
<script src="prefixfree.min.js" type="text/javascript"></script>

В самом низу мы подключили скрипт prefixfree (перед закрывающим тегом </BODY>), который позволит нам не использовать префиксы браузеров для свойств CSS. Он работает за кулисами, добавляя префикс текущего браузера для любого кода CSS, только тогда, когда это необходимо.

CSS

1. Основные стили

Для начала, мы применяем простой CSS-сброс и подключим шрифт «Ubuntu» с Google Fonts:

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
margin: 0;
padding: 0;
}
body {
font-family: Ubuntu, arial, verdana;
}

2. Таблица цен и ее ячейки

.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 0 auto;
width: 75%;
max-width: 800px;
padding-top: 10px;
margin-top: 100px;
}
.price_block {
width: 100%;
color: #fff;
float: left;
list-style-type: none;
transition: all 0.25s;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}

.pricing_table будет 75% шириной, но не более 800 пикселей, так что это не займет очень много места на широких экранах.
По уроку, мы будем идти от узкого экрана к широкому, отсюда .price_block на 100% в ширину и по умолчанию, чтобы покрыть всю доступную ширину. Позже мы будем использовать медиа-запросы, чтобы поместить несколько блоков горизонтально для широких экранов.

responsive-table-2

3. Заголовки

responsive-table-3
.pricing_table h3 {
text-transform: uppercase;
padding: 5px 0;
background: #333;
margin: -10px 0 1px 0;
}

Заголовки имеют отступ сверху на -10 пикселей. Это приводит к тому, что .price_block передвигается вверх над тенью

4. Цена

Теперь поговорим о деталях отображения стоимости

responsive-table-4
.price {
display: table;
background: #444;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}

.price имеет display: table; и его потомок .price_figure имеет display: table-cell; и vertical-align: middle; для достижения эффекта таблицы.

.price_figure будет являться контейнером для .price_number и .price_tenure поэтому их можно вертикально выравнять по центру как единое целое.

5. Остальное и эффект при наведении

.features {
background: #DEF0F4;
color: #000;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc;
font-size: 11px;
list-style-type: none;
}
.footer {
padding: 15px;
background: #DEF0F4;
}
.action_button {
text-decoration: none;
color: #fff;
font-weight: bold;
border-radius: 5px;
background: linear-gradient(#666, #333);
padding: 5px 20px;
font-size: 11px;
text-transform: uppercase;
}

.price_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background:linear-gradient(#DB7224, #F9B84A);
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: linear-gradient(#F9B84A, #DB7224);
}

Что произойдет при наведении:

  • Изменение цвета фона от темно-серого до желто-оранжевого градиента у .price и .action_button. Еще .price получает оранжевую внутреннюю тень для подчеркивания цветового эффект.
  • Тень простая полупрозрачная тень шириной в 5 пикселей.
  • Сдвиг вверх и масштабирование с использованием CSS3-трансформаций .price_block масштабируется до 104% и перемещается вверх на 5 пикселей.

.price_table уже имеет CSS3 переходы которые применяются при наведении.

6. Медиа запросы

Нам теперь не составит труда сделать наш прейскурант «резиновым» с помощью процентов. Вот, что нам надо изменить в соответствии с шириной экрана:

  • меньше чем 480px — показать 1 блок (уже по-умолчанию)
  • 480px — 768px — показывать 2 блока
  • 768px и больше — показывать все 4 блока
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {width: 50%;}
.price_block:nth-child(odd) {border-right: 1px solid transparent;}
.price_block:nth-child(3) {clear: both;}
.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
.price_block {width: 25%;}
.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
.price_block:last-child {border-right: 0 none;}
.price_block:hover {border: 0 none;}
}

Заключение

Вот мы и создали «резиновую» таблицу цен для адаптивного дизайна. Надеюсь, вы найдете, где его использовать! Данный урок был переведен с сайта WebDesign tuts+