Создаем простую таблица цен с помощью CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Шаг 1. HTML

Для начала мы создадим структуру документа для ценовой таблицы, которая достаточно простая:

<div id="pricing-table">
    <div>
        <div>Ультра</div>
        <div>$55</div>
        <div>в месяц</div>
        <ul>
            <li><b>10GB</b> пространства на диске</li>
            <li><b>100GB</b> месячный трафик</li>
            <li><b>20</b> почтовых ящиков</li>
			<li><b>Сколько хочешь</b> поддоменов</li>
        </ul>
        <a href="">Ознакомиться</a>
    </div >
    <div>
        <div>Супер</div>
        <div>$29</div>
        <div>в месяц</div>
        <ul>
            <li><b>5GB</b> пространства на диске</li>
            <li><b>50GB</b> месячный трафик</li>
            <li><b>10</b> почтовых ящиков</li>
			<li><b>Сколько хочешь</b> поддоменов</li>
        </ul>
        <a href="">Ознакомиться</a>
    </div>
    <div>
	. . .
    </div>
    . . .
</div>

<div>

<div>Ультра</div>

<div>в месяц</div>

<ul>

<li><b>10GB</b> пространства на диске</li>

<li><b>100GB</b> месячный трафик</li>

<li><b>20</b> почтовых ящиков</li>

<li><b>Сколько хочешь</b> поддоменов</li>

</ul>

<a href="">Ознакомиться</a>

</div >

<div>

<div>Супер</div>

<div>в месяц</div>

<ul>

<li><b>5GB</b> пространства на диске</li>

<li><b>50GB</b> месячный трафик</li>

<li><b>10</b> почтовых ящиков</li>

<li><b>Сколько хочешь</b> поддоменов</li>

</ul>

<a href="">Ознакомиться</a>

</div>

<div>

. . .

</div>

. . .

</div>

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

Шаг 2. CSS

Для начала зададим базовые стили для шаблона нашей страницы:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 928px; /* total computed width */
	zoom: 1;
}

#pricing-table:before, #pricing-table:after {
	content: "";
	display: table
}

#pricing-table:after {
	clear: both
}

#pricing-table .plan {
	font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px;
	float: left;
	_display: inline; /* IE6 double margin fix */
	position: relative;
	margin: 0 5px;
	box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
}

#pricing-table {

margin: 100px auto;

text-align: center;

width: 928px; /* total computed width */

zoom: 1;

}

#pricing-table:before, #pricing-table:after {

content: "";

display: table

}

#pricing-table:after {

clear: both

}

#pricing-table .plan {

font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;

background: #fff;

border: 1px solid #ddd;

color: #333;

padding: 20px;

width: 180px;

float: left;

_display: inline; /* IE6 double margin fix */

position: relative;

margin: 0 5px;

box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);

}

Для придания объема пунктам таблицы сделаем специальные тени:

#pricing-table .plan:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 10px;
	right: 4px;
	width: 80%;
	top: 80%;
	box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
	transform: rotate(3deg);
}

#pricing-table .plan:after {

z-index: -1;

position: absolute;

content: "";

bottom: 10px;

right: 4px;

width: 80%;

top: 80%;

box-shadow: 0 12px 5px rgba(0, 0, 0, .3);

transform: rotate(3deg);

}

Теперь выделим один из пунктов таблицы:

#pricing-table .popular-plan {
	top: -20px;
	padding: 40px 20px;
}

#pricing-table .popular-plan {

top: -20px;

padding: 40px 20px;

}

Для выделения заголовка будем использовать зубчатую линию, созданную с помощью изображения треугольника:

#pricing-table .header {
	position: relative;
	font-size: 20px;
	font-weight: normal;
	text-transform: uppercase;
	padding: 40px;
	margin: -20px -20px 20px -20px;
	border-bottom: 8px solid;
	background-color: #eee;
	background-image: linear-gradient(#fff, #eee);
}

#pricing-table .header:after {
	position: absolute;
	bottom: -8px; left: 0;
	height: 3px; width: 100%;
	content: '';
	background-image: url(data:image/png;base64,iVBO[...]);
}

#pricing-table .popular-plan .header {
	margin-top: -40px;
	padding-top: 60px;
}

#pricing-table .plan1 .header {
	border-bottom-color: #B3E03F;
}

#pricing-table .plan2 .header {
	border-bottom-color: #7BD553;
}

#pricing-table .plan3 .header {
	border-bottom-color: #3AD5A0;
}

#pricing-table .plan4 .header {
	border-bottom-color: #45D0DA;
}

#pricing-table .header {

position: relative;

font-size: 20px;

font-weight: normal;

text-transform: uppercase;

padding: 40px;

margin: -20px -20px 20px -20px;

border-bottom: 8px solid;

background-color: #eee;

background-image: linear-gradient(#fff, #eee);

}

#pricing-table .header:after {

position: absolute;

bottom: -8px; left: 0;

height: 3px; width: 100%;

content: '';

background-image: url(data:image/png;base64,iVBO[...]);

}

#pricing-table .popular-plan .header {

margin-top: -40px;

padding-top: 60px;

}

#pricing-table .plan1 .header {

border-bottom-color: #B3E03F;

}

#pricing-table .plan2 .header {

border-bottom-color: #7BD553;

}

#pricing-table .plan3 .header {

border-bottom-color: #3AD5A0;

}

#pricing-table .plan4 .header {

border-bottom-color: #45D0DA;

}

Последним шагом будет оформление цен, информации, и кнопок:

#pricing-table .price{
	font-size: 45px;
}

#pricing-table .monthly{
	font-size: 13px;
	margin-bottom: 20px;
	text-transform: uppercase;
	color: #999;
}

/* --------------- */

#pricing-table ul {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
	position: relative;
	padding: 10px 20px;
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	background-color: #72ce3f;
	border-radius: 3px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.15);
	opacity: .9;
}

#pricing-table .signup:hover {
	opacity: 1;
}

#pricing-table .signup:active {
	box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
}

#pricing-table .plan1 .signup{
	background: #B3E03F;
}

#pricing-table .plan2 .signup{
	background: #7BD553;
}

#pricing-table .plan3 .signup{
	background: #3AD5A0;
}

#pricing-table .plan4 .signup{
	background: #45D0DA;
}

#pricing-table .price{

font-size: 45px;

}

#pricing-table .monthly{

font-size: 13px;

margin-bottom: 20px;

text-transform: uppercase;

color: #999;

}

/* --------------- */

#pricing-table ul {

margin: 20px 0;

padding: 0;

list-style: none;

}

#pricing-table li {

padding: 10px 0;

}

/* --------------- */

#pricing-table .signup {

position: relative;

padding: 10px 20px;

color: #fff;

font: bold 14px Arial, Helvetica;

text-transform: uppercase;

text-decoration: none;

display: inline-block;

background-color: #72ce3f;

border-radius: 3px;

text-shadow: 0 -1px 0 rgba(0,0,0,.15);

opacity: .9;

}

#pricing-table .signup:hover {

opacity: 1;

}

#pricing-table .signup:active {

box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;

}

#pricing-table .plan1 .signup{

background: #B3E03F;

}

#pricing-table .plan2 .signup{

background: #7BD553;

}

#pricing-table .plan3 .signup{

background: #3AD5A0;

}

#pricing-table .plan4 .signup{

background: #45D0DA;

}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Интересно:

Print article

Опубликовал admin 20.07.2012 в 20:35, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Максим Сурнин

Спасибо,то что доктор прописал =)

Создаем простую таблица цен с помощью CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Опрос блога

Наши партнеры

Популярные статьи

Создаем простую таблица цен с помощью CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Опрос блога

Наши партнеры

Популярные статьи