Горизонтальное правило обычно используется как разделитель содержимого или разделов на страницах HTML. Сегодня я покажу вам, как стилизовать горизонтальное правило или hr элемент с помощью CSS. Элемент hr является самозакрывающимся, что означает, что нет конечного тега. Это приводит к тому, что браузеры отображают горизонтальное правило. Количество вертикального пространства, вставленного между правилом и содержимым, которое его окружает, зависит от браузера.
Итак, что если вы хотите избавиться от затенения, отображаемого по умолчанию для элемента в некоторых браузерах. Можно ли стилизовать элемент, чтобы он работал во всех современных браузерах.
При использовании CSS для создания пользовательской разделительной линии hr есть несколько вещей, которые вы должны помнить, один из них заключается в том, что для Internet Explorer и Safari требуется определенный цветной тег фона и высота, установленная в 1px или выше, где Safari отобразит строку в 3D, чтобы отобразить его правильно.
Тег HR (Horizontal Ruler) - очень полезный элемент html для разделения разделов текста на странице, не прибегая к графике с одним пикселем. Проблема в том, что вы оставлены без изменений, оставив его в браузере, чтобы определить, как он выглядит. Который может быть безразличным в лучшие времена.
Какие свойства вы можете использовать?
width : [pixel или процентное значение] определяет ширину;
высоты элемента: [значение пикселя] указывает высоту строки;
границы элемента: [значение пикселя], в этом случае она должна быть установлена в нулевой;
цвет: [hex value] this описывает цвет текста внутри элемента;
background-color : [hex value] устанавливает цвет фона для текущего элемента;
text-align : детализирует, как элемент будет выровнен по горизонтали;
Вам нужно будет включить в таблицу стилей и нужно изначально понимать, что некоторые браузеры могут не так показывать.
Как пример:
Код
hr {
border: 0;
color: #9E9E9E;
background-color: #9E9E9E;
height: 1px;
width: 100%;
text-align: left;
}
Переходим к оригинальным:
1. вариант будет показывать ваще доменное имя на сайте, что оригинально будет для любой тематической площадке.
HTML
Код
<hr class="style-four">
CSS
Код
hr.style-four {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-four:after {
content: "ZORNET.RU";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
2. Вариант:
HTML:
CSS
Код
hr.type_1 {
border: 0;
height: 55px;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/type_1.png);
background-repeat: no-repeat;
}
3. Вариант:
HTML
CSS
Код
hr.type_2 {
border: 0;
height: 55px;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/type_2.png);
background-repeat: no-repeat;
}
4. Вариант:
HTML
CSS
Код
hr.type_5 {
border: 0;
height: 55px;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/type_5.png);
background-repeat: no-repeat;
}
5. Вариант:
HTML
CSS
Код
hr.type_4 {
border: 0;
height: 55px;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/type_4.png);
background-repeat: no-repeat;
}
Вывод:
Здесь узнали о том, как можно использовать образы и стили для создания привлекательных дизайн hr линий.
