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

Дата: 07.02.2010 | Автор: Игорь Квентор | Рубрика: Дизайн |

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

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

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

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

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

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

Подпишитесь на RSS

Комментарии (12) на запись “Создание стильной разделительной линии средствами CSS”

Steward 07.02.2010 16:31

Можно узнать зачем такие заморочки с HR - только из-за семантики и W3C validation?

Гораздо проще

.hr {
border-top: 1px solid #9b9b9b;
border-bottom:1px solid #F4F4F4;
heigth:0;
}
Steward 07.02.2010 17:31

А вообще фиг с ним, пусть остаётся даже просто HR и вот такой стиль к нему прифигачить
hr {
border: 0 transparent; /*это надо для того, чтобы не было серых боковых границ - иначе они выглядят маленькими треугольничками*/
border-top: 1px solid green;
border-bottom: 1px solid yellow;
width: 200px; /*это по желанию*/
height: 0;
}
и с такими свойствами всё понятно и очевидно, а не какие-то бэкграунды, пэддинги… ужас :)
Игорь Квентор 07.02.2010 18:04

Узнать - можно. В моем коде всего три правила. В ваших примерах: в первом класс нужно к чему-то привязывать, значит будет либо пустой див, либо тот же hr но с прицепленным классом; во втором 4 правила (без учета width). Ну и где ж оно проще?
Steward 07.02.2010 18:25

Зато понятно с первого взгляда и сразу же… видно ЧТО пытаются сделать - а не почесать яйца носом…
hr кстати без прицепленного класса (про div можете забыть)

с учётом того что css всё-таки в большинстве случаев кэшируется, то я готов потратить две лишние строки чтобы облегчить понимание… (хотя border:0 у меня в reset, так что в сущности 3 ваших строки против 4-х моих в которых смысла на порядок больше)

ну да хозяин-барин - я ж не настаиваю…
знавал я одного программиста который вместо true писал 1==1, а вместо false 1!=1 - долго он с нами не протянул.
PoliteX 08.02.2010 19:27

прощу прощение что не по теме.

но такой вопрос мучает.
существуют ли какие способы ускорить “отрисовку страниц” на WP из-за медленного хостинга.
Игорь Квентор 08.02.2010 22:38

PoliteX, вопрос интересный, и на него у меня как раз заготовлен один из последующих постов. Однако господа-товарищи, давайте так: если вопрос не по теме поста, то вэлкам, пожалуйста, в e-mail, указанный в контактах.
Виктор 10.02.2010 10:49

По-моему, решение Игоря достаточно понятно. В принципе, каждый делает как ему удобно и понятно. Все не могут мыслить одинаково. Каждое из предложенных решений имеет право существовать.
Игорь Квентор 10.02.2010 17:03

Спасибо, Виктор! Вы правы, каждый находит свое решение и пользует то, что ему удобнее. Верстка - штука достаточно гибкая, и можно для одной и той же задачи придумать несколько решений.
Steward 11.02.2010 21:35

Кстати ни ваш ни мой способ (с HR) не работает ни в ИЕ6, ни в ИЕ7. ИЕ8 нормально.
поэтому он никуда не годится.. если ИЕ6 умирает, то ИЕ7 точно ещё долго будет…
поэтому придётся делать так:
<div class=”line2″></div>

и в класс добавить line-height: 0;
Steward 11.02.2010 21:42

Кстати.. чтобы работал ваш вариант во всех браузерах надо написать так
hr {
height: 4px;
background-color: #9b9b9b;
border-bottom:2px solid #F4F4F4;
}
тогда будет две однопиксельных полоски :)
surikat 13.02.2010 02:19

Здраствуйте:)) Спасибо большое за приведенные примеры. Для меня, как для начинающего-лучше и не придумаешь)).С линией разобралась, и вот возник вопрос: какие способы есть для того, чтобы этой самой линии указать на странице конкретное место?..Буду благодарна, если найдете время на ответ:)
Игорь Квентор 16.02.2010 10:40

surikat, как и любому блочному элементу, данной линии можно задать позиционирование