Как сделать прайс css

Шаблоны для прайса — лучшие варианты на основе HTML / CSS

В этой статье мы рассмотрим лучшие HTML / CSS шаблоны прайсов, которые легко интегрируются на сайт. Если вы уже задумывались над тем, чтобы создать свой уникальный прайс, то приведенные ниже шаблоны помогут в этом. Также мы перечислим руководства, которые помогут вам создавать собственные CSS таблицы.

Бесплатные HTML / CSS шаблоны прайсов

Простые адаптивные таблицы цен

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

Flat Pricing Tables Design

Еще один плоский шаблон для таблиц цен со всеми основными функциями.

Minimal Pricing Table

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

Responsive Flip Pricing Table

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

Cool Price Tables

Простые и красивые таблицы цен для вашего сайта с добавлением анимации.

Cool Pricing Table

Крутой шаблон прайса с красивой шапкой, кнопкой в нижней части и областью описания.

Flat Pricing Table

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

Single Price Tags

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

Product Preview Slider

Компактный и простой шаблон прайса со слайдером изображений для демонстрации галереи товаров.

Price Table Template

Это бесплатный шаблон. Его можно использовать так, как вам нравится, данный шаблон отлично работает с фреймворком Bootstrap .

Цветная CSS таблица цен отображается в современном минималистичном стиле с помощью комбинации трех цветов.

Simple pricing table

CSS Price Tags

Простые прямоугольные блоки цен для любого раздела вашего сайта.

Unique Price Template

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

Mini Pricing Table

Мини-версия адаптивной таблицы CSS цен , с помощью которой можно продавать расширения или дополнительные функции.

Standard Table Showcase

Минималистичный и плоский макет, который поддерживает адаптивные функции.

Cool Table

Шаблон прайса, который напоминает WordPress . Ширина по умолчанию установлена на 80%, что делает всю таблицу слишком широкой, поэтому скриншот был сделан с шириной 50%.

Plans & Pricing Table

Простой прайс для демонстрации доступных тарифных планов. Поставляется с выделенным » популярным » планом с помощью оформления таблицы CSS .

CSS3 стили для создания прайсов – руководство

Из учебника вы узнаете, как использовать некоторые новые свойства CSS3 для создания красивого шаблона прайса. Его суть состоит в том, чтобы задать для столбцов стили блоков и списков, и получить красивый и уникальный дизайн.

Checkout Pricing Table HTML Template

Простой шаблон прайса. Каждый тарифный план содержит название, цену, список функций и фиолетовую кнопку регистрации.

CSS3 Pricing Table UI Element (руководство)

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

Как создать простую диаграмму цен с помощью SaaS (HTML / CSS)

На данный момент я работаю над премиум-сайтом WordPress и столкнулась с необходимостью создания приличной таблицы цен в стиле SaaS .

Эффект Orange CSS3 Pricing Tables effect

Изучив это руководство, вы научитесь создавать из пользовательского интерфейса Impressionist код и стили CSS3 для прайсов.

Создание современной таблицы прайсов с помощью HTML и CSS

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

Адаптивный HTML-шаблон прайсов

Воссозданный шаблон прайсов с http://www.webs.com/pricing.htm .

Free Responsive CSS Pricing Table with HTML/CSS

Это адаптивная таблица цен для адаптивных тем.

Multiple Pricing Table

Free Flat Responsive Pricing Table

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

Источник

Как оформить красивую современную прайс таблицу на CSS3

Привет верстальщики и web-мастеры! В этом уроке мы узнаем, как написать CSS3 код для оформления таблицы с ценами из шаблона пользовательского интерфейса импрессиониста, сделанного Владимиром Кудиновым. Этот вид прайс таблицы стал довольно популярным в последнее время. Помимо варианта с оформлением цен на хостинг, тут могут быть цены на популрные товары, или еще что-то чтобы вы хотели красиво выделить. Все посмотрели, давайте приступим к работе…

Шаг 1 – HTML

Мы создадим таблицу с классом “pricing-table”, и этот класс будет основным для добавления нашего стиля. Теперь мы будем делить наши столбцы с ценами на три части: первая –

, будет иметь название плана с соответствующей ценой; второй – , будет иметь особенности плана (например: пропускная способность, дисковое пространство и т.д.) и, наконец, третий – , будет колонтитулом/footer-ом с текстовым описанием.

        LightОтлично для малого бизнеса$7
в месяц Join Без поддержкиBasic Options100GB HDD1TB трафик
   
Middle Отлично для малого бизнеса 
 
Super Отлично для малого бизнеса 
 
 
  
$919
 в месяц Join 
 
$15
 в месяц Join 
 
  
 
24/7 тех поддержка
 
24/7 тех поддержка
 
 
 
Расширенные опции
 
Расширенные опции
 
 
 
200GB HDD
 
500GB HDD
 
 
 
2TB трафик
 
5TB трафик
 
 
 
 
Просто идеальный хостинг под любой ваш проект или стартап! Присоединяйтесь сейчас!
 
Просто идеальный хостинг под любой ваш проект или стартап! Присоединяйтесь сейчас! 
Пока наш коммерческий директор был в отпуске мы сделали этот
 
 
 
Просто идеальный хостинг под любой ваш проект или стартап! Присоединяйтесь сейчас!
 
 
 
   

Шаг 2 – Основной CSS

Перед началом оформления цен в таблице, мы добавим файл CSS-reset, который снизит несоответствия в разных версиях браузеров, такие как line heights по умолчанию, margins и font sizes заголовков и т. д. Мы будем использовать файл CSS-reset сделанный Эриком Мейером.

После этого мы устанавливаем ширину для таблицы цен. Так как мы будем использовать три колонки, ширина будет 670px, но если вы будете использовать больше или меньше, чем три столбца вам нужно увеличить или уменьшить значение ширины. Мы также установим некоторые основные стили для столбцов таблицы. Чтобы добавить внешние отступы – margin между таблицами мы должны установить для

“display: inline-block;”, установив это свойство могут появиться некоторые ошибки в зависимости от содержания вашей таблицы, так что если вы не хотите использовать пробелы между столбцами то вы можете убрать это св-во.

body .pricing-table < min-width: 670px; >.pricing-table td

Шаг 3 – секция План

Для секции План мы установим ширину (width) (это значение ширины будет также использоваться в следующих разделах), высоту (height), добавим некоторые отступы (padding ) и закругленные углы с помощью свойства “border-radius”. Затем мы будем добавлять типографские стили (font family, size, line height, и т.д.) для заголовка плана и краткого описания.

.pricing-table thead .plan td < width: 210px; height: 42px; padding: 15px 0; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; >.pricing-table thead .plan h2 < font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; text-transform: uppercase; line-height: 24px; >.pricing-table thead .plan em

Мы также имеем две разные цветовых схем, зеленый и оранжевый. Для каждой цветовой схемы мы будем устанавливать различные цвета, текста, теней и фоновое изображение.

.pricing-table thead .plan .green < color: #36611e; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: url(green_pattern.png) repeat-x 0 0; >.pricing-table thead .plan .orange

Шаг 4 – секция Цена

Раздел с ценами является наиболее трудным, потому что у нас тут много подробностей. Для начала мы создадим такое же значение ширины, как и разделе план, добавим свет, CSS3-градиент, некоторые стили типографии и т.д.

.pricing-table thead .price td < position: relative; width: 210px; padding: 25px 0; font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; color: #b6b07c; background: #f9f8f1; background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2)); background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%); >.pricing-table thead .price p < display: table; margin: 0 auto; font-size: 50px; line-height: 60px; >.pricing-table thead .price p span < font-size: 0.5em; display: table-cell; vertical-align: middle; >.pricing-table thead .price span

Кнопку “JOIN” мы будем позиционировать на расстоянии 41px сверху и -5px справа, добавим отступы, размер шрифта и т.д. Как мы делали в разделе план так и тут также должны установить разные цвета и градиенты для зеленого и оранжевый цветовой гаммы.

.pricing-table thead .price a < display: block; position: absolute; top: 41px; right: -5px; height: 32px; padding: 0 10px; line-height: 32px; font-size: 12px; text-decoration: none; >.pricing-table thead .price .green a < color: #37621f; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #82d344; background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34)); background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%); background: -o-linear-gradient(top, #82d344 0%,#51af34 100%); background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%); background: linear-gradient(to bottom, #82d344 0%,#51af34 100%); >.pricing-table thead .price .orange a

Чтобы добавить “два треугольника» и «маленькую стрелку», чтобы кнопка стала похожа на “флаг” мы будем использовать :before и :after псевдо-селекторы. Эти два селектора позволяют вставить содержимое до и после элемента, таким образом, мы не должны добавлять два дополнительных тега в HTML. Маленькая стрелка справа от кнопки будут добавлена помощью смарт-техники border. Объединив все границы разных цветов для каждого из них, мы можем создать нестандартные формы, такие как треугольники, подробную информацию об этой технике вы можете посмотреть на этом сайте.

.pricing-table thead .price .green a:before, .pricing-table thead .price .orange a:before, .pricing-table thead .price .green a:after, .pricing-table thead .price .orange a:after < display: block; position: absolute; content: ''; >.pricing-table thead .price .green a:before, .pricing-table thead .price .orange a:before < width: 8px; height: 32px; top: 0; left: -8px; background: url(badge.png) no-repeat; >.pricing-table thead .price .green a:after, .pricing-table thead .price .orange a:after < width: 0; height: 0; bottom: -5px; right: 0; border-bottom: 5px solid transparent; >.pricing-table thead .price .green a:before < background-position: 0 0; >.pricing-table thead .price .orange a:before < background-position: 0 -32px; >.pricing-table thead .price .green a:after < border-left: 5px solid #1c5d40; >.pricing-table thead .price .orange a:after

Шаг 5 – раздел Характеристики

Мы начнем с полосы в верхней части этого раздела, мы добавим ее используя селектор :before. Затем мы установим ширину (заметим, что здесь ширина не 210px, потому что у нас есть левый отступ), верхнюю границу, и некоторые типографии стилей.

.pricing-table tbody tr:first-child td:before < position: absolute; display: block; content: ''; width: 100%; height: 5px; top: -25px; left: 0; background: url(stripe.png) repeat-x 0 0; >.pricing-table tbody td < width: 170px; padding-left: 40px; line-height: 30px; border-top: 1px solid #f2f2f2; font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #828282; >.pricing-table tbody tr:first-child td

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

.pricing-table .clock-icon td, .pricing-table .basket-icon td, .pricing-table .star-icon td, .pricing-table .heart-icon td < background: #ffffff url(icons.png) no-repeat 0 0; >.pricing-table .clock-icon td < background-position: 0 0; >.pricing-table .basket-icon td < background-position: 0 -30px; >.pricing-table .star-icon td < background-position: 0 -60px; >.pricing-table .heart-icon td

Шаг 6 – раздел с описанием

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

Шаг 7 – Float текст

За последний разделе нашей таблицы, «плавающий» текст (в котором можно добавлять пользовательские описания, чтобы сделать колонки выделяются), мы будем добавлять пользовательские шрифты, вы можете найти этот шрифт на google fonts и мы добавим его с помощью @font-face.

.table-float < display: block; position: absolute; width: 300px; padding: 80px 0 0 0; top: 85%; left: 130px; >.table-float p < font-family: 'Lobster', cursive; font-size: 16px; color: #858585; line-height: 20px; >.table-float p.big < font-size: 65px; color: #f76117; text-align: right; line-height: 65px; >.table-float .arrow

Шаг 8 – Internet Explorer

Как обычно, Internet Explorer, имеет небольшие отличия в CSS, чтобы исправить их, создадим новый файл, который будет загружен только в IE9, IE8 и IE7. Чтобы загрузить этот файл только в этом браузере мы будем использовать условные комментарии.

.pricing-table thead .price a < right: 0; >.pricing-table thead .price .green a:before, .pricing-table thead .price .orange a:before, .pricing-table thead .price .green a:after, .pricing-table thead .price .orange a:after < display: none; >.pricing-table tbody tr:first-child td:before

Заключение

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

Источник

How TO — Responsive Pricing Table

Learn how to create a responsive pricing table with CSS.

• Basic
• $ 9.99 / year
• 10GB Storage
• 10 Emails
• 10 Domains
• 1GB Bandwidth
• Sign Up

• Pro
• $ 24.99 / year
• 25GB Storage
• 25 Emails
• 25 Domains
• 2GB Bandwidth
• Sign Up

• Premium
• $ 49.99 / year
• 50GB Storage
• 50 Emails
• 50 Domains
• 5GB Bandwidth
• Sign Up

How To Create a Responsive Pricing Table

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Create three columns of equal width */
.columns float: left;
width: 33.3%;
padding: 8px;
>

/* Style the list */
.price list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
>

/* Add shadows on hover */
.price:hover box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
>

/* Pricing header */
.price .header background-color: #111;
color: white;
font-size: 25px;
>

/* List items */
.price li border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
>

/* Grey list item */
.price .grey background-color: #eee;
font-size: 20px;
>

/* The «Sign Up» button */
.button background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
>

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) .columns width: 100%;
>
>

Источник