Все для веб-дизайнера
Создаем простую таблица цен с помощью CSS3
Имея на сайте несколько ценовых сегментов услуг вы наверняка задумывались, как это красиво оформить. Красивый и в тоже время простой дизайн привлечет пользователя, и не будет нагромождать дизайн. В таких случаях важно чтобы информация на странице была понятливой и четкой, чтобы пользователь смог без проблем рассмотреть предлагаемую вами услугу. В данном уроке мы рассмотрим как создать и оформить простую таблицу цен для сайта с помощью некоторых правил css3. Такая таблица станет отличным дополнением сайта, на котором надо организовать виды услуг.
Шаг 1. HTML
Для начала мы создадим структуру документа для ценовой таблицы, которая достаточно простая:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |
Как вы заметили разметка достаточно проста, на ней нам не стоит останавливаться. Перейдем к следующему шагу.
Шаг 2. CSS
Для начала зададим базовые стили для шаблона нашей страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#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); } |
Для придания объема пунктам таблицы сделаем специальные тени:
|
1 2 3 4 5 6 7 8 9 10 11 |
#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); } |
Теперь выделим один из пунктов таблицы:
|
1 2 3 4 |
#pricing-table .popular-plan { top: -20px; padding: 40px 20px; } |
Для выделения заголовка будем использовать зубчатую линию, созданную с помощью изображения треугольника:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#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; } |
Последним шагом будет оформление цен, информации, и кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
#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; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 20.07.2012 в 20:35, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
