Очередной урок о теге hr и его свойствах. Разделительная линия для сайта при помощи средств CSS выглядит примерно так:

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

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

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

в стилях определенные правила: Либо сделать так, как выше я сделал в верстке очередного макета сайта:

.top_line{
background:#72adfd;
border:none;
height:1px;
padding-bottom: 1px;
border-bottom:1px solid #0059d4;
}

Тег имеет очень оригинальный способ отображения самого в себя, поэтому можно создать нижнее поле толщиною в один пиксель: padding-bottom: 1px. В результате получится красивая объемная линия. В итоге полученную разделительную линию для сайта не отличить от созданной в фотошопе:

В общем, экспериментируйте, подставляйте разные цвета, размеры и так далее, потому что html разделительная линия намного быстрее загрузится чем созданная на основе картинки.

Заказывать верстку сайта нужно у профессионала!