Создание стильной разделительной линии средствами CSS

hr1.png

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

Однако можно вполне обойтись и без картинки. Для этого используем старый добрый тэг <hr />, которому зададим несколько хитрых правил в стилях. Данный тэг добавляет на страницу разделительную линию, оставляя над и под собой по одной пустой строке. По умолчанию эта линия выглядит не слишком кошерно — обычная черная черта слева направо через всю страницу. Приукрасим ее:

hr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-bottom:1px solid #F4F4F4;
}

Цвет линии #9b9b9b — темно-серый. Под ней мы разместили более светлый блик #F4F4F4 в виде нижнего бордера. Но так как у данного тэга весьма своеобразный способ отображения самое себя, то для необходимого эффекта следует добавить нижнее поле padding-bottom в 1 пиксель.

В результате получаем практически тот же результат, как если бы это была нарисованная в фотошопе двухцветная линия толщиной в 2 пикселя:

hr2.png

07.02.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: