Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Использование тега hr стилизация

Поддержи проект!!! smile

Что такое тег hr, определение тега hr, синтаксис, примеры использования. Позиция тега hr стилизация

О теге hr

  1. Что такое тег hr
  2. Свойства тега hr по умолчанию
  3. Ставим тег hr по центру
    1. Тег hr по центру - align="center"
    2. Тег hr по центру - inline
    3. Тег hr по центру - inline-block
    4. Тег hr по центру - margin: 0 auto
  4. Позиционируем тег hr справа
  5. Стилизация тега тег hr 1
  6. Стилизация тега hr добавим красок
  7. Стилизация тега hr добавим тени
  8. Стилизация тега hr добавим движение
  1. Что такое тег hr

    Начнем с определения : "Что такое тег hr" :
    Тег hr - это одинарный тег, единственная функция которого предназначена нарисовать горизонтальную линию.

    Тег hr - одинарный тег

    Это означает, что данный тег не требует закрывающего тега.

    Синтаксис "тега hr"

    <hr>

    Результат:


    Атрибуты тега hr

    align

    Определяет выравнивание линии.

    color

    Цвет линии.

    noshade

    Рисует линию без трехмерных эффектов.

    size

    Толщина линии.

    width

    Ширина линии.

  2. Свойства тега hr по умолчанию

    Как вы знаете, что у каждого тега есть свои свойства по умолчанию.

    И когда мы пишем свои стили, то значение свойств тега меняются.

    Css свойства по умолчанию для тега hr:

    если мы посмотрим на свойства тега hr по умолчанию, то увидим вот такие свойства.
    Данные свойства никуда не нужно вставлять - они идут по умолчанию к тегу hr

    hr {

    display: block;

    unicode-bidi: isolate;

    margin-block-start: 0.5em;

    margin-block-end: 0.5em;

    margin-inline-start: auto;

    margin-inline-end: auto;

    overflow: hidden;

    border-style: inset;

    border-width: 1px;

    }

    1. Ставим тег hr по центру

      Несколько примеров позиционирования тега "hr посередине".
      Напоминаю, что атрибут align="center" - считается устаревшим и примять его е рекомендуется.

      Второй - "display: inline"

      и третий пункт - "inline-block" - использование значения "inline", не важно какого, результат будет всегда одинаковый.
      Позиционироваться будет посередине.
      Естественно, что браузер должен поддерживать "inline"

      И последним поставим тег hr посередине с помощью "margin: 0 auto".



    2. Центрируем тег hr посередине с помощью align="center"

      Работа атрибута align="center" для тега hr

      html:
      <hr align="center" width="200" color="red">

      Как видим, тег "hr" не хочет позиционироваться таким способом.


      Почему данное позиционирование не срабатывает на данной страницу!?

      Для того, чтобы найти проблему, первым делом -создаем простую страницу html, туда загружаем наш код и смотрим:
      Почему данное позиционирование не срабатывает на данной страницу!?

      Все работает так, как нужно! Значит, какие-то стили не позволяют срабатывать "align="center""

      Естественно, что я знаю в чем причина, если мы откроем наш файл css, то увидим, что препятствует этому, но это совсем другая история!

      Как можно реанимировать данный атрибут на сайте!?

      align="center" можно заменить позиционированием блока.

      Если вы собираетесь использовать данный код у себя на сайте, то класс(выделено зеленым) не нужно применять - здесь примерно потому, чтобы обратиться не вообще к тегу hr , а к определенному тегу hr , чтобы продемонстрировать, как это будет работать!

      css:
      hr[align="center"].align_center {

      margin: 0 auto;

      }

      Html:
      <hr align="center" width="200" color="red" class="align_center">

      Результат позиционирования по центру тега "hr" + margin: 0 auto;




    3. Позиционируем тег hr по центру с помощью inline + text-align: center;

      Один из вариантов позиционировать посередине/по центру, это обернуть его в блок div и добавить ему display со значением "inline"(всего из несколько разновидностей).

      А уже самому тегу добавляем позиционирование посередине - "text-align: center;"

      Css:

      #hr_center hr {

      display: inline;

      }

      div#hr_center {

      text-align: center;

      }

      html:

      <div id="hr_center1"><hr width="200" color="red"></div>
      Результат :



    4. Позиционируем тег hr по центру с помощью inline-block + text-align: center;

      В доказательство выше приведенных слов, изменим лишь значение "inline" на значение "inline-block" :

      Css:

      #hr_center1 hr {

      display: inline-block;

      }

      div#hr_center1{

      text-align: center;

      }

      html:

      <div id="hr_center1"><hr width="200" color="red"></div>

      Результат позиционирования тега "hr" + text-align: center;

      Как видим результат аналогичный! "тег hr" благополучно разместился посередине.



    5. Ставим тег hr посередине с помощью margin

      Для данного способа позиционирования тега "hr", вокруг тега ничего ставить не будет в отличии от верхних примеров.
      Селектор id помести прямо вовнутрь тега "hr" html:
      <hr width="200" color="red" id="hr_center2">

      Нам понадобится новое название селектора id? чтобы отделить от предыдущих примеров.

      Ставим посередине свойством "margin: 0 auto;"

      Css:

      hr#hr_center2 {

      margin: 0 auto;

      }

      Результат позиционирования тега "hr" с помощью margin


  3. позиционируем тег hr справа

    Не будем расписывать подробно позиционирование справа, мы уже делали такое с блочным элементом div поэтому, смысла не вижу особого ... повторять уже ранее написанное.
    Но в качестве примера, все же вот позиционируем тег hr справа:
    Html :

    <div style="height:30px"><hr align="right" width="200" color="red" id="hr_center3"> </div>

    css:

    hr#hr_center3 {

    float: right;

    margin: 10px 0;

    }

    Результат :

  4. Стилизация тега тег hr

    Когда вы применяете так по умолчанию, то выглядит он не совсем так, как бы хотелось! Поэтому!


    Самое время стилизовать тег тег hr!:
    Я давно уже стилизовал тег тег hr, поскольку довольно часто использую его на сайте:
    Css:

    hr {

    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);

    border: 0;

    height: 1px;

    margin: 22px 0 22px 0;

    }

    Html:

    <hr>

    Результат:


  5. Стилизация тега hr добавим красок

    Чтобы тег hr выглядел чуть интереснее - можно ж добавить ему красок :
    CSS:

    hr {

    border: 0;

    height: 4px;

    margin: 30px 0;

    background-image: linear-gradient(to right, #BFE2FF 50%, #337AB7 50%, #337AB7 60%, #ff9100 60%, #ff9100 70%, #05b5e6 70%, #05b5e6 80%, #b448b8 80%, #b448b8 90%, #BFE2FF 90%, #BFE2FF 100%);

    }

    Html:
    <hr>
    Результат:

  6. Стилизация тега hr добавим тени

    Как вариант можно добавить немного теней для тега hr :
    Css:

    hr {

    height: 20px;

    margin: 30px auto;

    width: 70%;

    background-image: radial-gradient(farthest-side at 50% -50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    position: relative;

    border: none;

    }

    hr:before {

    height: 1px;

    position: absolute;

    top: -1px;

    left: 0;

    right: 0;

    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0));

    }

    Html:
    <hr>
    Результат:

  7. Стилизация тега hr добавим движение

    Как вариант стилизации тега hr можно добавить движенье прямо в теге hr Css:

    hr {

    margin: 30px 0;

    border: 2px solid #BFE2FF;

    position: relative;

    overflow: visible;

    }

    hr:after {

    content: "";

    border: 2px solid #337AB7;

    position: absolute;

    width: 20%;

    top: -2px;

    animation: anim-hr 5s linear infinite;

    }

    @keyframes anim-hr {

    0% {

    left: -20%;

    }

    100% {

    left: 100%;

    }

    }

    Html:
    <hr>
    Результат:

    Чтобы не получалось такого эффекта, будто линия уходит за грань родительского блока, в него добавим:

    style="overflow-x: hidden; padding: 0 0 0 0"

    Смотрим, что получится:



Последняя дата редактирования : 13.12.2020 14:57
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
тег hrтег hr в htmlатрибуты тега hrтег hr cssперечислите атрибуты тега hrтег hr в html как задать ширинуатрибуты тега hr в htmlкак сделать объемную hr линиюстилизация hrhr html стилизация

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.