Очередной урок о теге hr и его свойствах. Разделительная линия для сайта при помощи средств CSS выглядит примерно так:
Такие линии применяются в дизайне на многих сайтах. Обыкновенный способ рисования линии — в фотошопе. Она создается толщиною в два пикселя, один пиксель — требуемая линия, второй пиксель — своеобразная тень этой линии. Полученный результат выкладывают на страницу, в качестве фона или как изображение.
Но есть и другой способ, без использования фотошопа и рисования в нем изображения. Для решения задачи можно использовать тег
. Этот тег используется для создания разделительной линии на странице, но оставляет сверху и снизу по пустой строке. Стандартно получаемая линия не очень красива — просто черная прямая. Чтобы исправить эту ситуацию, достаточно задать тегу
в стилях определенные правила: Либо сделать так, как выше я сделал в верстке очередного макета сайта:
.top_line{ background:#72adfd; border:none; height:1px; padding-bottom: 1px; border-bottom:1px solid #0059d4; }
Тег имеет очень оригинальный способ отображения самого в себя, поэтому можно создать нижнее поле толщиною в один пиксель: padding-bottom: 1px. В результате получится красивая объемная линия. В итоге полученную разделительную линию для сайта не отличить от созданной в фотошопе:
В общем, экспериментируйте, подставляйте разные цвета, размеры и так далее, потому что html разделительная линия намного быстрее загрузится чем созданная на основе картинки.
Заказывать верстку сайта нужно у профессионала!