Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS3

10 элегантных таблиц цен CSS для вашего веб-проекта

by
Length:ShortLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

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

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

1. Comparative Responsive Pricing Tables

Comparative Responsive Pricing Tables предлагает широкий спектр опций для ваших ценовых таблиц. Пользователи имеют на выбор 13 уникальных дизайнов, которые они могут настроить с помощью анимаций, цветовых схем, всплывающих подсказок и т. д. Эти таблицы используют значки Font Awesome и совместимы с несколькими браузерами.

Клиенты описали таблицы как «очень хороший продукт, который поставляется с премиальным сервисом».

Comparative Responsive Pricing Tables

Лучшие черты:

  • 13 уникальных дизайнов
  • всплывающие подсказки с текстом и списками
  • многоцветные темы для оформления
  • три типа анимации наведения
  • и многое другое

Comparative Responsive Pricing Tables это именно то, что вам необходимо, если вы ищете богатый на опции дизайн для создания таблиц цен.

2. CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables - это бестселлер CodeCanyon и не без оснований. Как и Comparative Responsive Pricing Tables, здесь широкий спектр настроек дизайна от статических таблиц до таблиц со скользящими столбцами, колонками анимации, различными функциями наведения и таблицами с иллюстрациями. Он поддерживается шестью самыми популярными браузерами на рынке.

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

CSS3 Responsive WordPress Compare Pricing Tables

Отличительные опции:

  • панель администратора с живой конфигурацией
  • 20 вариантов расцветок
  • неограниченное количество столбцов и строк
  • любые значения ширины и размера шрифтов для каждого столбца
  • и прочее

Надёжный CSS3 Responsive WordPress Compare Pricing Tables будет удерживать своё место на рынке ценовых таблиц долгие годы.

3. Responsive Multi Style Bootstrap Pricing Tables

Responsive Multi Style Bootstrap Pricing Tables - ещё один хороший выбор для пользователей, которые ищут таблицы цен с широкими возможностями дизайна.

Responsive Multi Style Bootstrap Pricing Tables имеют три варианта оформления и каждый дизайн можно настроить несколькими способами, используя 20 различных цветовых схем. Пользователи могут выбирать, использовать им Bootstrap или нет.

Responsive Multi Style Bootstrap Pricing Tables

Лучшие опции:

  • три варианта дизайна
  • 20 наборов цветов для каждого
  • эффект наведения
  • подсказки
  • Font Awesome иконки
  • и много другого

Responsive Multi Style Bootstrap Pricing Tables не плагин WordPress; хотя пользователи WordPress могут купить WordPress version.

4. Pure CSS Responsive Pricing Tables for WordPress

Pure CSS Responsive Pricing Table for WordPress - это плагин Bootstrap для WordPress, который имеет 15 проверенных тем, простых в использовании, они настраиваются и предоставляют неограниченные цвета и стили, чтобы вписаться в существующую тему WordPress.

Поддержка плагина предоставляется по email и содержит ответы на технические вопросы о функциях элемента и сообщения об ошибках и проблемах.

The Pure CSS Responsive Pricing Table for WordPress

Лучшие опции:

  • неограниченное число таблиц
  • сортировка колонок и столбцов перетаскиванием
  • PayPal  
  • поддержка Google Fonts  
  • и многое другое

Примерно с 2015 года Pure CSS Responsive Pricing Tables for WordPress постоянно обновляется, чтобы сохранить толпы поклонников.

5. Pricing—Responsive CSS3 Pricing Table

Pricing—Responsive CSS3 Pricing Table - это последний плагин таблицы цен на CodeCanyon. Он полностью отзывчив, основан на структуре Bootstrap и совместим с Firefox, Safari, Opera, Chrome, Edge и IE10 и IE11.

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

Responsive CSS3 Pricing Table

Лучшие опции:

  • гибкий и удобный для мобильных устройств макет
  • тумблер цен за месяц / год
  • кнопка CSS3 эффекта, эффект зависания CSS3 
  • и многое другое

С его лаконичным дизайном, Pricing—Responsive CSS3 Pricing Table новинка просмотра.

6. Great Pricing Tables Framework

Еще одного новичка в CodeCanyon, Great Pricing Tables Framework отличают строгость и простота использования.

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

Great Pricing Tables Framework

Лучшие опции:

  • простота работы
  • гибкий дизайн
  • Font Awesome 
  • поддержка Bootstrap 
  • и многое другое

Great Pricing Tables Framework не предлагает множество функций, но очень чистый и простой подход к дизайну таблицы цен, безусловно, является его силой.

7. 7 Responsive Flat Bootstrap Pricing Tables

7 Responsive Flat Bootstrap Pricing Tables предлагают семь разных ценовых таблиц в лаконичном стиле.

Эти таблицы поддерживают Bootstrap с обещанным обновлением Bootstrap 4 в конце этого года с бесплатными обновлениями CSS и jQuery в будущем. Клиенты восхваляют «гладкий и современный дизайн» таблицы цен, который вы «можете скопировать и вставить прямо на мой сайт».

7 Responsive Flat Bootstrap Pricing Tables

Лучшие опции:

  • минималистичный дизайн
  • отзывчивость
  • как горизонтальные, так и вертикальные таблицы
  • и другое

Если чистота и классика - это то, что вы ищете, то 7 Responsive Flat Bootstrap Pricing Tables - правильный выбор для вас.

8. Round Pricing Tables

Round Pricing Tables - уникальное предложение среди этого списка ценовых таблиц, поскольку оно предлагает круглые таблицы цен вместо прямоугольных.

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

Round Pricing Table

Лучшие опции:

  • креативный дизайн
  • CSS3 анимации
  • поддержка Google и Font Awesome  
  • cross browser поддержка
  • и другое

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

9. Hexagon CSS Pricing Table

Hexagon CSS Pricing Table - таблица цен, в которой используется классный и умный дизайн, чтобы добавить немного шика на ваш сайт.

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

 Hexagon CSS Pricing Table

Лучшие опции

  • 16 стилей наведения
  • 12 цветовых схем
  • эффекты анимации
  • поддержка Google Font и Font Awesome 
  • и другое

Как и в случае с Round Pricing Table Features, Hexagon CSS Pricing Table понравится пользователям, которые открыты для более творческого подхода.

10. CSS Pricing Tables

CSS Pricing Tables недавно обсуждались на CodeCanyon, вероятно, потому, что пользователи обращаются к несложному дизайну. Плагин использует один дизайн, но позволяет настраивать цвета для улучшения вида сайта.

CSS Pricing Tables

Лучшие опции:

  • отзывчивый дизайн
  • эффект наведения
  • 361 иконка
  • простота работы
  • и другое

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

Заключение

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

Если вы хотите развить свои навыки CSS, ознакомьтесь с нашими free CSS tutorials.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.