Оригинальные разделительные линии на сайт можно создавать при помощи красивых картинок, либо воспользоваться специальными стилями CSS. В этой статье вы найдете 27 вариантов различных оригинальных разделительных линий на сайт. На самом деле их гораздо больше, т.к. рисованные линии представлены целыми наборами, а созданные при помощи css имеют множество вариаций в каждом из примеров. Вэлкам!
Разделительные линии на сайте служат для визуального выделения отдельных блоков. Например, для отделения друг от друга статей в ленте блога, либо отдельных блоков в сайдбаре. Ими так же можно отделять различные части длинного текста, форматируя таким образом статью для лучшего ее восприятия при чтении.
Издавна в верстке сайтов использовался для этих целей специальный тэг hr. Правда, по-умолчанию он выглядит не самым лучшим образом, какой-то серенькой невзрачной линией да еще и с невнятным эффектом объема (см. примеры на первой картинке).
Мало того, каждый браузер по-своему отображает такую линию, что не есть гуд.
Поэтому энтузиасты придумали массу вариантов, как исправить эти некрасивости при помощи стилей в CSS, либо просто не морочились, а заменяли эту линию обычной картинкой.
Сегодня мы рассмотрим оба варианта добавления разделительной линии на сайт. Сначала рассмотрим варианты с картинками.
Как вы понимаете, картинок может существовать бесчисленное множество. Я выбрал наиболее интересные и эффектные.
Поехали!
Здесь, чтобы изменить цвет, надо название цвета написать на английском языке.
Коричневый текст на зеленом фоне
Коричневый текст на зеленом фоне
Будут вопросы, задавайте в комментариях или воспользуйтесь в меню-контакты. Да, чуть не забыла. У меня в браузере Mozilla Firefox вертикальные линии отображаются в виде круга, в других браузерах нормально. За браузер ИЕ я помолчу.
На сегодня у меня все. Всего Вам Доброго и наилучшего. Почитайте по теме разделительные линии в этом посте.
, где size — толщина разделителя в пикселях:
, где noshade означает сплошную линию:
, где width — ширина разделителя в пикселях:
, где width — ширина разделителя в %:
, где align=»left» показывает, что разделитель выровнен по левому краю:
, где align=»right» — разделитель выровнен по правому краю:
, где align=»center» — разделитель — по центру:
, где align=»justify» — разделитель выровнен по ширине:
— используя color, можно задать цвет линии:
— если задать больший вертикальный размер линии (size) и минимальный горизонтальный (width),то получим вертикальную линию:
Можно также использовать так называемые «разделители», чтобы отделить текст. Их вставляют как картинки. Например: 
Для этого вставляем следующий код: 
Загрузка...
