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

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

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

Вариант 1

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


Вариант 2:

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


Вариант 3:

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


Вариант 4:

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


Вариант 5:

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

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


Вариант 6:

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


Вариант 7:

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


Вариант 8:

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


Вариант 9:

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


Вариант 10:

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


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

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

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

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

  • Джесси:

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

    Ответить
    • Alexander:

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

      Ответить
  • bart:

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

    Ответить