Найти

Категории

Генератор форм

Конструктор форм

Для веб-мастера

  • AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
  • CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
  • GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
  • Etxt.RU - биржа статей.
  • FastVPS - качественный VPS/VDS хостинг в германии.
  • Roistat - система сквозной бизнес-аналитики.

Реклама

Главная › ❶ HTML и CSS

Простая таблица цен при помощи CSS

Рейтинг:
Дата: 18 июня 2012 Просмотры 24846 Комментарии 1

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

Простая таблица цен на CSS

В этой статье мы создадим таблицу цен тарифных планов на примере фиктивного веб-хостинга.

Посмотреть пример ДЕМО Скачать исходники ИСХОДНИКИ 

Для того, чтобы облегчить деление блоков я использовал notjustgrid http://www.notjustagrid.com/, и colorzilla gradient editor http://www.colorzilla.com/gradient-editor/ для создания градиента кнопки. Кроме этого в данном примере используются Google веб-шрифты, CSS текст тени, закругленные уголы и градиенты.

Подключаем CSS Grid и Google Шрифты

<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" media="screen" href="css/grid960.css" />
<link rel="stylesheet" type="text/css" href="css/type.css" />
<link rel="stylesheet" type="text/css" href="css/helpers.css" />
<link rel="stylesheet" type="text/css" href="css/ux.css" />
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'>

Полный CSS код

* {
    font-family: Arial, 'Free Sans' !important;
}
#container {
    padding: 40px 0;
}
.pricing_table {
    background-color: #fff !important;
    text-align: center;
    border-bottom: 2px solid #f3f3f3;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow:    0px 0px 5px 3px #e3e3e3 !important;
    -webkit-box-shadow: 0px 0px 5px 3px #e3e3e3 !important;
    box-shadow:         0px 0px 5px 3px #e3e3e3 !important;
}
.pricing_table:hover {
    border-bottom: 2px solid #d3d3d3;
}
.pricing_table div {
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
}
.price_head {
    text-shadow: 1px 1px 1px #999;
    font-weight: bold;
    font-family: 'Cabin Condensed', sans-serif !important;
    letter-spacing: -1px;
    font-size: 28px !important;
    padding: 20px 0 !important;
    color: #fff !important;
    -moz-border-radius: 7px 7px 0 0;
    -webkit-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
    background: #4096ee !important;
}
.price_div {
    padding-top: 20px !important;
}
.price_month {
    font-size: 38px !important;
    font-weight: bold;
    color: #4096ee;
    text-shadow: 1px 1px 1px #c3c3c3;
}
.price_button {
    padding: 20px 0 !important;
}
.bg_grey {
    background: #f3f3f3 !important;
}
.button {
    background-color: #0099cc;
    padding: 10px;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #999;
    background: rgb(157,213,58); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}
.button:hover {
    background: rgb(230,240,163); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
 }

HTML-код таблицы цен

<div id="container">
<div class="pricing_table quarter">
    <div class="price_head">Personal Host</div>
    <div class="price_div"><span class="price_month">$2</span> / mo</div>
    <div>2 GB Storage</div>
    <div class="bg_grey"><b>50 GB Data Transfer</b></div>
    <div class="bg_grey"><b>Uptime 99.9%</b></div>
    <div>5 Domains</div>
    <div>Unlimited Sub Domains</div>
    <div class="price_button"><a href="" class="button">ORDER NOW</a></div>
</div>

<!-- make it others 3 -->

<div style="clear:both;margin: 5px 0;">&nbsp;</div>

<div class="pricing_table quarter">
    <div class="price_head" style="background: #f3bf34 !important;">VPS A</div>
    <div class="price_div"><span class="price_month" style="color: #f3bf34 !important;">$25</span> / mo</div>
    <div>10 GB Storage</div>
    <div class="bg_grey"><b>1 TB Data Transfer</b></div>
    <div class="bg_grey"><b>256 MB Memory</b></div>
    <div>WHM</div>
    <div>1 IP Adress</div>
    <div class="price_button"><a href="" class="button">ORDER NOW</a></div>
</div>

<!-- make it others 3 -->

<div style="clear:both;"></div>
</div>

В результате у нас должно получиться что-то вроде этого:

Демо таблица цен с использованием CSS

Посмотреть пример ДЕМО Скачать исходники ИСХОДНИКИ 

---------------------
Источник: http://superdit.com/2012/06/18/simple-table-pricing-using-css/

Оцените эту статью:



ТЕГИ:
таблица цен , css
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Простая CRM

Salesap CRM

Нашли ошибку в тексте

Система Orphus
Copyright © 2008-2024 Шамшур Иван. Все права защищены.
https://biznesguide.ru/html_css/181.html
3,98 из 5 на основе 9 оценок.