Элемент горизонтального разделителя <hr> - один из наиболее редко и неправильно используемых в коде HTML, возможно, из-за того, что он не выглядит привлекательно в исходном состоянии. При использовании его без задания свойств на веб-странице, он выглядит следующим образом:

Его целью является отображение изменения темы — это возможность для читателя «перевести дух», обдумать прочитанное, подготовиться к новой информации. Подобное оформление используется для обозначения изменения места действия внутри главы книги, в длинных журнальных статьях — перед введением новых людей или мест. Конечно, горизонтальный разделитель обычно выглядит не как простая серая линия: он может выглядеть как геральдическая лилия или как другая декоративная фигура.

Горизонтальный разделитель не должен быть использован на веб-страницах для следующих целей: чтобы добавить линию, что нужно делать с помощью свойства нижней рамки элемента или свойства рамки изображения. Его нужно применять только по назначению, после хотя бы нескольких абзацев текста или в самом верху или низу тега body.

С помощью кода CSS горизонтальному разделителю можно задать любой внешний вид. Проще всего превратить его в квадрат:

hr {
width: 25px;
height: 25px;
border: none;
background: #000;
color: #000;
}

Обратите внимание на то, что горизонтальный разделитель остается по центру. Можно превратить его в ромб с помощью трансформаций CSS:

hr {
width: 25px;
height: 25px;
border: none;
background: #000;
color: #000;
transform: rotate(45deg);
}

Также для создания внешнего вида горизонтального разделителя можно использовать фоновое изображение:

hr {
width: 200px;
height: 200px;
border: none;
background: #fff;
color: #fff;
background-image: url(skull.png);
}

Так как горизонтальный разделитель будет использован многократно на разных страницах, имеет смысл закодировать изображений в формате base-64:

hr {
width: 200px;
height: 200px;
border: none;
background: #fff;
color: #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAA…);
}

Это даст такой же результат, как и в предыдущем примере.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: