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

Шаг 1. HTML

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

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

Шаг 2. CSS

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

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

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

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

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

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

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

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