Прямая линия HTML

Прямая линия очень интересный элемент html. .

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

Для создания прямой линии в HTML применяется тег <hr>. Он является блочным элементом и, значит, всегда начинается с новой строки.

Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.

Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.

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

<hr style="width:90%"> - длина относительно блока контента, по умолчанию прямая линия занимает 100%

Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.

<hr style="width:90%; height:5px;" >

Цвет линии задаётся свойством background, в значении которого указывается код цвета.

<hr style="width:90%; height:10px; background:#037FFC;">

Можно взять линию в рамку. Для этого в код вводится свойство border.

Причём рамка может быть любого вида доступного для рамок html.

<hr style="width:90%; height:10px; background:#037FFC; border:2px solid #FC0307;">

<hr style="width:50%; height:10px; background:#037FFC; border:dashed 2px #FC0307;">

<hr style="width:90%; height:10px; background:#037FFC; border:dotted 2px #FC0307;">

Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.

Для этого в код линии, вместо свойства border, вводятся свойства border-top и border-bottom

<hr style="width:90%; height:10px; background:#037FFC; border-top:solid 2px #FC0307; border-bottom:solid 2px #FC0307;">

Причём все три линии можно сделать разной толщины, цвета и формы.

<hr style="width:90%; height:10px; background:blue; border-top:dashed 5px red; border-bottom:solid 10px green;">

Можно закруглить и даже заострить торцы линии.

Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.

<hr style="width:90%; height:10px; background:#037FFC; border-radius:5px;">

<hr style="width:90%; height:10px; background:#037FFC; border-radius:50%;">

<hr style="width:90%; height:7px; background:#037FFC; border-radius:50% 50% 0 0;">

Если добавить в код свойство теней box-shadow, то можно сделать прямую линию такого вида

<hr style="width:90%; height:10px; background:#037FFC; border-radius:50%; box-shadow:0 0 0 5px #FC0307;">

 

Или так:

<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 3px #FC0307;">

Изменяя третье значение box-shadow, можно размыть края рамки.

<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 3px 5px #FC0307;">

А если к комплекту значений box-shadow, через запятую добавить ещё несколько, то можно сделать разноцветную рамку.

<hr style="width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307;">

Если в код добавить свойство transform, то можно сделать её наклонной, или вертикальной.

Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.

<hr style="width:50%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);">

 

 

 

Изменяя цифры в значениях, можно всячески изменить внешний вид линии.

Более подробно о свойствах CSS box-shadow и transform, можно узнать в статье Как сделать тень для текста, картинки, блока.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!

Форматирование текста. HTML. < < < В раздел > > > Рамки html

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

3 комментария на «Прямая линия HTML»

  1. stariс говорит:

    В атрибут style добавьте свойства align: left; или align: right;. Если нужно спозиционировать более точно, то вместо них добавьте свойство margin: 0 0 0 0;
    Первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева. Если нужно задать отступ только с одной стороны, то в свойстве margin указывается эта сторона: margin-left: 0; и т.п. Если значение больше нуля то к нему добавляются единицы измерения: margin-left: 6px;. Только при использовании свойства margin, текст не будет обтекать линию. Если нужно чтоб обтекал, то свойства align: left; и margin применяются вместе.

  2. Петр говорит:

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

  3. ольга говорит:

    Очень интересная статья!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *