10 бесплатных фрагментов CSS для создания адаптивных таблиц цен

Страница с ценами является основным элементом любого интернет-магазина. Он используется для продуктов SaaS, сервисных компаний и магазинов электронной коммерции по всему Интернету.

И ни одна страница с ценами не будет полной без таблицы цен, в которой сравниваются варианты, функции и (естественно) цены. Но разработка собственного дизайна с нуля может быть проблемой.

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

1. Icon Table Трэвиса Уильямсона

Отличные визуальные эффекты всегда продаются. Это могут быть фотографии продуктов или пользовательские иллюстрации, но визуальные эффекты привлекают внимание быстрее, чем текст.

Эта таблица с ценами в виде значков — отличный пример того, что возможно с визуальными столбцами таблицы. Добавляя значки, вы можете информировать клиентов о том, что они получают с каждым пакетом, еще до того, как они что-то прочитают. Значки демонстрируют различную мощность и функции. Самый маленький план имеет бумажный самолетик, а самый большой план использует полноценный ракетный корабль. Расскажите о контрасте!

См. перо
Таблица цен Трэвиса Уильямсона (@travisw)

2. Полосатая зебра с красками от Агустина Ортиса

Этот пример имеет гораздо более простую таблицу цен и следует более традиционным правилам проектирования. Он использует полосы зебры, большие заголовки с ценами и различные цвета, чтобы выделить один конкретный формат ценообразования среди остальных.

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

См. Таблицу цен на ручки | Tabla de Precios от Агустина Ортиса

3. Темно-фиолетовый стол Майка Торосяна

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

См. Таблицу цен на ручки от Майка Торосяна

4. Профессиональное ценообразование от LittleSnippets

Веб-сайты B2B часто ищут более профессиональный дизайн, который отличается от креативных цветовых схем и посторонних значков. Этот дизайн ценообразования является одним из таких примеров, использующих типичную цветовую схему темных и светлых оттенков.

Один столбец с ценами выделяется темно-синим цветом, чтобы выделиться из остальной части таблицы. Использование этой техники является стандартной практикой, поскольку она может привести к более высокому коэффициенту конверсии. Вот почему в «профессиональном» плане также используется тень, которая появляется поверх других столбцов. Но при уменьшении размера он попадает в стопку для более удобного просмотра.

См. Pen #1214 – Таблица цен от LittleSnippets

5. Стол с эффектами наведения, Нидхиш Балачандран

В этом дизайне таблицы цен вы найдете несколько великолепных эффектов наведения, которые добавляют цвет к затемненным заголовкам таблицы. Каждый из них оставляет место для фонового изображения по вашему выбору, а эффект наведения управляется с помощью CSS.

Еще одна вещь, которая мне нравится, — это событие щелчка, привязанное ко всему столбцу таблицы. Таким образом, если посетитель щелкнет в любом месте столбца, он перенаправит его прямо на соответствующую страницу регистрации.

См. таблицу цен на ручки от Нидхиша Балачандрана.

6. Таблицы цен Bootstrap от Сахара Али Разы

Я большой поклонник Bootstrap, так как вы можете сделать так много с фреймворком и связанными с ним темами. Одним из таких примеров является этот пример таблицы цен.

Большая часть этого дизайна написана по индивидуальному заказу, включая наклонный фон заголовка и анимацию при наведении. Но общий макет основан на Bootstrap, что делает его полностью адаптивным по умолчанию. Типографика потрясающая, и мне также нравится анимация наведения при перемещении по каждой строке. Это чистый дизайн таблицы, который подойдет практически для любого типа веб-сайта.

См. Таблицу цен на Pen Bootstrap от Сахар Али Раза

7. Таблица цен на дизайн материалов от Мортена Сренсена

Если вам нравится материальный дизайн Google, вам обязательно понравится эта таблица цен. Это материальная таблица пользовательского интерфейса, следующая многим из предложенных Google функций, таких как наведение тени и плоские цветовые схемы.

См. перо
Таблицы цен на дизайн материалов (flexbox) Мортена Сренсена.

8. Чистая и простая таблица цен от Дэниела Хирна

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

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

См. Таблицу цен на ручки -1 Дэниела Хирн

9. Таблицы WIP от Дилана Маклеода

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

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

См. Таблицы цен на ручки от Дилана Маклеода

10. Рассказ о ценах Flexbox от CSSGirl

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

Хотя самой большой особенностью здесь является использование flexbox для форматирования столбцов таблицы. Этот пример доказывает, что flexbox — это будущее адаптивных веб-сайтов.

См. тарифный план Pen Flexbox от Lindsey