Example

Горизонтальный разделитель

Для создания горизонтальных разделительных линий (иногда их ещё называют линейками) в HTML-документах используется одиночный тег


(сокр. от англ. horizontal rule — «горизонтальная линия»). Данный элемент относится к элементам структурирования текста и служит для визуального и логического разграничения различных текстовых фрагментов.

В настоящее время в теге могут использоваться только универсальные атрибуты и атрибуты событий. Все собственные атрибуты тега, использовавшиеся ранее, были признаны устаревшими и не рекомендованы к применению спецификацией HTML 4.01 (см. спецификацию).

Пример использования тега:

    charset="utf-8"> Example  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Установка цвета, толщины и стиля линии средствами CSS

В браузерах элемент


реализован как блочный элемент нулевой высоты с рамкой серого цвета толщиной в 1px. Конкретные оттенки используемых цветов зависят от браузера. Стиль линий по умолчанию — inset .

Чтобы убедиться в этом, достаточно в стилевых правилах задать элементу высоту, отличную от нуля, и толщину рамки, отличную от единицы:

       

И вот что мы получим в браузере:

То есть, чтобы получить, например, двойную горизонтальную линию оранжевого цвета, следует использовать следующие стилевые правила:

  

Либо другой вариант с тем же визуальным эффектом:

  

Примечание: При нулевой высоте элемента боковые линии рамки не видны, но, если их вывод не отменить явно с помощью соответствующих свойств border-left и border-right , как это сделано в вышеприведённых и нижеприведённых примерах, то при использовании линий толщиной более 2px на концах линии будут наблюдаться небольшие «дефекты» из-за того, что браузер будет пытаться согласовать размеры этих концов с размерами концов фактически невидимых боковых линий.

Несложно догадаться, что установив для верхней и нижней линий, разные цвета можно получить двухцветную линейку.

  

Трёхцветные линейки

Получить трёхцветную разделительную линию можно используя цвет фона элемента


, то есть его свойство background-color :

  

Линейки с эффектом градиента

Используя функции градиента в свойстве background-image элемента


, можно получить линию с эффектом градиента, например:

  

Линейки с фоновым рисунком

Не менее оригинальные разделительные линии можно получить, используя в качестве фона для элемента


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

  

Установка горизонтального размера линии

Рассмотрим ещё один пример стилизации разделительной линии:

  

Результат в браузере будет следующим:

По умолчанию элемент


занимает всю доступную ширину в родительском элементе. То есть обычно левый и правый концы разделительной линии совпадают с левой и правой границей текстового содержимого.

Задать какой-то свой размер элементу можно с помощью стилевого свойства width , устанавливающего горизонтальный размер элемента. Например, чтобы линия занимала только 50% доступной ширины, подкорректируем наше правило:

  

В браузере это отобразиться следующим образом:

Как видно из рисунка, линия стала короче в два раза. При этом она выровнена по центру, поскольку в браузерах для элементов


по умолчанию используется правило:

hr < margin-left: auto; /* Отступ слева */ margin-right: auto; /* Отступ справа */ >

Согласно же спецификации, при одновременном использовании для свойств margin-left и margin-right значения auto для элемента должны устанавливаться одинаковые отступы слева и справа, то есть, другими словами, элемент должен выравниваться по центру родительского элемента.

Если есть необходимость «прижать» разделительную линию к левому или правому краю, необходимо обнулить одно из вышеуказанных свойств — margin-left или margin-right :

  

Результат в браузере будет следующим:

Поскольку элемент


по умолчанию занимает всю доступную ширину в родительском элементе, регулировать его размер, а заодно и местоположение по горизонтали можно с помощью свойств margin-left и margin-right , не прибегая к использованию свойства width . Например, следующее правило позволяет «отрезать» у разделительной линии 15 пикселей слева и 30% от её первоначального размера справа:

  

Другие статьи по схожей тематике

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом


разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; >

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста линией с градиентом

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Текст с градиентом

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

Как сделать горизонтальную линию в css

Для формирования горизонтальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before и :after. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 
.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 50px; height: 1px; /* располагаем линию сверху от текста */ top: 15px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 50px; height: 1px; /* размещаем линию снизу и справа*/ bottom: 15px; right: 20px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Источник

Читайте также:  Обработка персональных данных html
Оцените статью