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

0

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

Смотреть Демо

HTML

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

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

CSS

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

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

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

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

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

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

Итоговый результат

Итоговый результат

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

Поделиться: