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

Прямая линия может быть очень красивой.

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

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

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

Да и возможностей у CSS несравнимо больше, в чём Вы сами и убедитесь, прочитав статью.

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

Поэтому, после отладки внешнего вида прямой линии, все значения атрибута style, лучше будет перенести в файл style.css шаблона.

Особенно если прямых линий несколько.

А теперь давайте посмотрим, какой вид можно придать прямой линии.

<hr style="width:50%"> - длина относительно экрана

Прямая линия

можно её покрасить

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

Цветная прямая линия

можно сделать потолще

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

Толстая цветная прямая линия

можно сделать бордюрчик

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

можно такую линию

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

 

а можно такую

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

 

Если добавить свойство border-radius, то можно сделать её с острыми краями:

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

 

А можно с круглыми:

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

 

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

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

 

Или так:

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

 

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

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

 

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

<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;">

 

Если в код добавить свойство 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 не будет опубликован. Обязательные поля помечены *