Wednesday, 08 August 2012 19:45

Эффективная таблица цен на CSS3

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

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

1

Прежде чем идти дальше, в случае, если вы пропустили это, вы можете проверить и мои предыдущие цены CSS3 оформления таблиц .

HTML

Ниже делаем разметку. Как обычно, ничего сложного здесь.

<div id="pricing-table">
    <div class="plan plan1">
        <div class="header">Enterprise</div>
        <div class="price">$59</div>  
        <div class="monthly">per month</div>      
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
      <li><b>Unlimited</b> subdomains</li>      
        </ul>
        <a class="signup" href="">Sign up</a>         
    </div>
    <div class="plan plan2 popular-plan">
        ...
    </div>
    <div class="plan plan3">
        ...
    </div>
    <div class="plan plan4">
        ...
    </div>        
</div>
 

Начальная структура

2

Ниже фрагмент кода содержит начальные стили для макета таблицы:

#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);    
}
 

Добавляем тени внизу

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);  
} 
 

Подчеркиваем предпочтительный план

4

Планы уже относительно выровняны, мы можем поднять .popular-plan блок с помощью отрицательного top значения.

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

Дизайн для заголовков

5

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

#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;
}   
 

Цена и стили регистрации

6

Наша ценовая таблица почти готова.

#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;
} 
 

Вот и все!

Я надеюсь, вам понравился этот урок.

Прочитано 3195 раз
Другие материалы в этой категории:
« Социальные кнопки на CSS3