• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Изменить линию hr стиля в горизонтальном виде (Как сделать оригинальный вид стиля для hr линий)
Изменить линию hr стиля в горизонтальном виде
Kosten
Дата: Суббота, 10.02.2018, 18:15 | Сообщение 1
Администраторы
Сообщений:18265
Награды: 55


Горизонтальное правило обычно используется как разделитель содержимого или разделов на страницах 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:

Код
<hr class="type_1">

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

Код
<hr class="type_2">

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

Код
<hr class="type_5">

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

Код
<hr class="type_4">

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 линий.
Страна: (RU)
Kosten
Дата: Суббота, 10.02.2018, 18:23 | Сообщение 2
Администраторы
Сообщений:18265
Награды: 55


Еще можно посмотреть линий hr, которые идут с изображение.
Страна: (RU)
Kosten
Дата: Суббота, 10.02.2018, 18:44 | Сообщение 3
Администраторы
Сообщений:18265
Награды: 55


Вы можете пойти немного дальше и добавить цветную рамку к вашему экрану hr, это означает, что фактический тег встроенного hr-стиля начинает немного увеличиваться, но вам нужно только овладеть им один раз, после чего становится легче , Вот код html, который вам понадобится, измените значения цвета на то, что вам подходит.

Рекомендуется использовать минимальную высоту 4px, чтобы она отображалась правильно в Firefox.



Код
<hr style="height: 4px; width: 75%; color: #FFFF80; background-color:#FFFF80; border-style:solid; border-width:1px; border-color:#000040 " />

В приведенных выше примерах где использовалось Inline CSS Styles, но вы можете установить глобальное HR-правило, причем разница в том, что с глобальным вы сможете иметь только один стиль линии на странице. Основной глобальный параметр будет похож на приведенный ниже пример и должен быть помещен над вашим тегом /head или помещен в вашу текущую таблицу стилей, если вы используете ее.

Код
<style type="text/css">
hr {
color: #FFFF00;
background-color: #FFFF00;
height: 4px;
width: 75%;
border: 1px solid #FF0000;
}
</style>

Если вам не нужна граница вокруг вашей линии, просто оставьте значение границы.
Просто разместите вышеуказанный код везде, где вы хотите свою разделительную линию.
Прикрепления: 2783710.png(0.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Изменить линию hr стиля в горизонтальном виде (Как сделать оригинальный вид стиля для hr линий)
  • Страница 1 из 1
  • 1
Поиск: