Skip to content

Таблица цен с использованием CSS3

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

HTML

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

<ul class="pricing_table">

    <!-- Каждый тарифный план -->
    <li>
        <h3>Старт</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">0 ք</span>
                <span class="price_term">бесплатно</span>
            </div>
        </div>
        <div class="features">
            <ul>
                <li><strong>2GB</strong> места на диске</li>
                <li>Неограниченный трафик</li>
                <li>Резервное копирование</li>
                <li><strong>1 сайт</strong></li>
                <li>1 FTP пользователь</li>
                <li>Поддержка <strong>24 x 7</strong>.</li>
            </ul>
        </div>
        <div class="footer">
            <a href="#" class="action_button">Заказать</a>
        </div>
    </li>

    <!-- Оптимальный тарифный план -->
    <li class="optima">
        <h3>Оптимальный</h3>
        <div class="price_body">
            <div class="price">
                <span class="price_figure">200 ք</span>
                <span class="price_term">в месяц</span>
            </div>
        </div>
        <!-- ... -->
    </li>

    <!-- ... -->

</ul>

Вот, что мы имеем: неупорядоченный список .pricing_table, в котором элементы списка – столбцы тарифных планов. Оптимальный тарифный план отмечен классом .optima, который мы выделим цветом и увеличением размера.

CSS

Примечание: Префиксы браузеров опущены для краткости кода. В демонстрации мы используем скрипт prefixfree, который сам вставляет префиксы в соответствии с браузером.

Начнем стилизацию таблицы цен с основных ячеек:

/*Только те элементы LI, которые являются прямыми потомками*/
.pricing_table>li {
    background: linear-gradient(#666, #333);
    width: 33.33%;
    float: left;
    list-style-type: none;
    /*Используем анимацию для эффекта при событии hover*/
    transition: all 0.2s;
}

Стили при наведении и для оптимального тарифа:

/* Стили для оптимального варианта */
.pricing_table li.optima {
    background: linear-gradient(#F9B84A, #DB7224);
    transform: scale(1.03);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table li.optima .footer .action_button {
    background: linear-gradient(#F9B84A, #DB7224);
}

/* Стили при наведении */
.pricing_table>li:hover {
    background: linear-gradient(#74b335, #60a61b);
    transform: scale(1.07);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
    position: relative; z-index: 10
}
.pricing_table>li:hover .footer .action_button {
    background: linear-gradient(#74b335, #60a61b);
}

Такими стилями мы выделяем оптимальный вариант от всех других оранжевым градиентом и увеличением размера. А при наведении на любой из тарифных планов задаем зеленый градиент и также увеличение размера, но более чем у оптимального варианта. Здесь возникает небольшая загвоздка в том, что тариф, на который навели курсор мыши, должен выводится вперед. Но если оптимальный тариф находится после тарифа, на который навели мышь, то оптимальный тариф так и останется впереди. Чтобы это исправить мы используем z-index, подробнее о применении которого вы можете узнать из статьи «То, о чем Вам никто не расскажет о z-index».

И финишная прямая – стилизуем контент тарифных планов:

/*стили для содержания таблицы*/
.pricing_table h3 {
    text-transform: uppercase;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
}
.pricing_table .price_body {
    width: 125px;
    height: 125px;
    margin: 0 auto 15px auto;
    border: 2px solid #fff;
    border-radius: 100%;
    display: table;
}
.pricing_table .price {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
}
.pricing_table .price .price_figure {
    display: block;
}
.pricing_table .price .price_term {
    font-size: 11px;
    font-weight: normal;
}

.pricing_table .features li {
    list-style-type: none;
    padding: 5px 0;
}

.pricing_table .footer {
    padding: 10px;
    background: #333;
    margin-top: 10px;
}
.pricing_table .footer .action_button{
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    background: #000;
    padding: 4px 20px;
    border-radius: 15px;
    background: linear-gradient(#666, #333);
}

Подведем итоги

Из этого урока вы узнали, как можно создать красивую таблицу цен. Хоть мы ее и не делали адаптивной к различным устройствам, но это очень легко сделать. Надо только с помощью медиа запросов настроить количество выводимых тарифных планов на одной строке. Благодарю вас за внимание и удачи вам в продажах своих товаров и услуг через нашу версию прайслиста!