Стильные светлые блоки с ценами на услуги на CSS3
827материалов
228тем на форуме
3003комментария
6152пользователя

Стильные светлые блоки с ценами на услуги на CSS3


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

Установка:

В самый низ вашего 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;    
-moz-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .3);    
-webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .3);    
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%;    
-webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);    
-moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);    
box-shadow: 0 12px 5px rgba(0, 0, 0, .3);    
-webkit-transform: rotate(3deg);    
-moz-transform: rotate(3deg);    
-o-transform: rotate(3deg);    
-ms-transform: rotate(3deg);    
transform: rotate(3deg);    
}    
#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: -moz-linear-gradient(#fff, #eee);    
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
background-image: -webkit-linear-gradient(#fff, #eee);    
background-image: -o-linear-gradient(#fff, #eee);    
background-image: -ms-linear-gradient(#fff, #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(http://webmaster-ucoz.ru/ucoz/img/social/png/skachannye_fajly-3.png);    
}    
#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;    
-moz-border-radius: 3px;    
-webkit-border-radius: 3px;    
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 {    
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .3) inset;    
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .3) inset;    
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;    
}    
/* --------------- */    
#about {    
text-align: center;    
color: #444;    
font: normal small Arial, Helvetica;    
}    
#about a {    
color: #777;    
}

Следующий код в то место, где должны быть сами блоки:
Код
<div id="pricing-table">    
<div class="plan plan1">    
<div class="header">Enterprise</div>    
<div class="price">$59</div>    
<div class="monthly">в мес</div>    
<ul>    
<li><b>10GB</b> место на диске</li>    
<li><b>100GB</b> трафик в мес</li>    
<li><b>20</b> почтовых ящиков</li>    
<li><b>Неограничено</b> поддоменов</li>    
</ul> <a class="signup" href="">Купить</a>    
</div>    
<div class="plan plan2 popular-plan">    
<div class="header">Professional</div>    
<div class="price">$29</div>    
<div class="monthly">в мес</div>    
<ul>    
<li><b>5GB</b> место на диске</li>    
<li><b>50GB</b> трафик в мес</li>    
<li><b>10</b> почтовых ящиков</li>    
<li><b>Неограничено</b> поддоменов</li>    
</ul> <a class="signup" href="">Купить</a>    
</div>    
<div class="plan plan3">    
<div class="header">Standard</div>    
<div class="price">$19</div>    
<div class="monthly">в мес</div>    
<ul>    
<li><b>3GB</b> место на диске</li>    
<li><b>25GB</b> трафик в мес</li>    
<li><b>5</b> почтовых ящиков</li>    
<li><b>Неограничено</b> поддоменов</li>    
</ul> <a class="signup" href="">Купить</a>    
</div>    
<div class="plan plan4">    
<div class="header">Basic</div>    
<div class="price">$9</div>    
<div class="monthly">в мес</div>    
<ul>    
<li><b>1GB</b> место на диске</li>    
<li><b>10GB</b> трафик в мес</li>    
<li><b>2</b> почтовых ящиков</li>    
<li><b>Неограничено</b> поддоменов</li>    
</ul> <a class="signup" href="">Купить</a>    
</div>    
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 03.04.2014 в 14:07
Материал просмотрен: 1180 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта