Оформление горизонтальных линий HR

В данной заметке представлено 10 вариантов оформления горизонтальных линий <hr>

Все примеры не имеют классы и привязаны непосредственно к самому тегу.

Вариант 1

Простой пример с двумя точками.


Вариант 2:

Пример с тремя точками, которые плавно меняют свой цвет.


Вариант 3:

Несколько точек с использованием SVG.


Вариант 4:

Еще один пример на SVG c анимацией.


Вариант 5:

Пример с бегущей линией.

Чтобы избежать появления горизонтальной прокрутки, когда полоска уходит за предел блока, он должен иметь стиль overflow-x: hidden;.


Вариант 6:

Наклонная линия с градиентом и контентом по середине (на примере это солнышки).


Вариант 7:

Еще одна линия с градиентом и небольшой анимацией.


Вариант 8:

Пример горизонтальной линии с тенью.


Вариант 9:

Зигзагообразная линия, сделанная линейным градиентом.


Вариант 10:

И еще один простенький пример с применением линейного градиента без переходов.


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

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • PiVirus:

    Отличный сайт и годный контент. Не много прокачал вариант 7. Хотел поделиться модификацией и закинуть код в коммент, а сайт ругается, либо запрещенный тег или слишком часто пишу, хотя там только html и css.

    Ответить
    • Alexander:

      На тег <скрипт> он обычно ругается
      Можно ссылку оставить на кодопен, например. Там и нагляднее будет.

      Ответить
        • Alexander:

          Интересно, но ваш вариант ИМХО больше подходит для разделения секций (как Вариант 6), это цельная линия и стрелка вниз, показывающая что ниже еще есть информация.
          Линиями <hr> я обычно отделяю абзацы или заголовки, это для себя в основном и делал.
          Но ваш вариант пригодится, Спасибо! Там можно увеличить стрелку, покрасить и даже привязать на стрелку событие.

          Ответить
  • Джесси:

    Спасибо, крутые линии :)))

    Ответить
    • Alexander:

      Спасибо за комментарий, пока читал его в хроме, нашел 3 ошибки в нем 🙂
      Исправил сейчас.

      Ответить
  • bart:

    Спасибо, пригодилось

    Ответить