27 оригинальных разделительных линий на сайт

Оригинальные разделительные линии на сайт можно создавать при помощи красивых картинок, либо воспользоваться специальными стилями CSS. В этой статье вы найдете 27 вариантов различных оригинальных разделительных линий на сайт. На самом деле их гораздо больше, т.к. рисованные линии представлены целыми наборами, а созданные при помощи css имеют множество вариаций в каждом из примеров. Вэлкам!

Разделительные линии на сайте служат для визуального выделения отдельных блоков. Например, для отделения друг от друга статей в ленте блога, либо отдельных блоков в сайдбаре. Ими так же можно отделять различные части длинного текста, форматируя таким образом статью для лучшего ее восприятия при чтении.

Издавна в верстке сайтов использовался для этих целей специальный тэг hr. Правда, по-умолчанию он выглядит не самым лучшим образом, какой-то серенькой невзрачной линией да еще и с невнятным эффектом объема (см. примеры на первой картинке).

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

Поэтому энтузиасты придумали массу вариантов, как исправить эти некрасивости при помощи стилей в CSS, либо просто не морочились, а заменяли эту линию обычной картинкой.

Сегодня мы рассмотрим оба варианта добавления разделительной линии на сайт. Сначала рассмотрим варианты с картинками.

Как вы понимаете, картинок может существовать бесчисленное множество. Я выбрал наиболее интересные и эффектные.
Поехали!

Разделительные линии на сайт в виде картинок

1. Коллекция красивых каллиграфических разделительных линий для сайта

2. Коллекция красивых каллиграфических разделительных линий для сайта 2

3. 12 винтажных разделительных линий на сайт

4. Декоративные разделительные линии для сайта в стиле ретро

5. 12 цветочных разделительных линий для вашего сайта

6. Разделительные линии на сайт в стиле цветочного орнамента

7. Декоративные разделительные линии для сайта

8. Классные разделительные линии на сайт в виде орнаментов и колючей проволоки

9. Декоративные разделительные линии на сайт, нарисованные от руки

10. Декоративные разделительные линии на сайт, нарисованные от руки 2

11. 18 симпатичных разделительных линий для сайта

12. Мега набор прекрасных разделительных линий для сайта и не только

13. Разделительные линии для сайта с короной по центру

14. Красивый набор разделительных линий для сайта в стиле ретро

15. Красивый набор разделительных линий для сайта в стиле ретро 2

16. Рисованные от руки декоративные разделительные линии для сайта

17. Золотая коллекция разделительных линий для сайта

Несколько слов о том, как применить эти картинки в качестве разделительной линии. Существует, как минимум, два варианта:

1. Использовать тот самый тэг hr. Просто к нему мы прописываем в стилях css следующий набор правил:

hr{
background:url(line.gif) repeat-x top left;
border: 0;
height:10px; /* высота нашей картинки-линии */
}

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

background:url(line.gif) no-repeat top center;

2. Использовать картинку в качестве фона для блока, в котором она будет изображать разделительную линию. Тут еще проще. Добавляем эту картинку в качестве фона к конкретному блоку вот таким правилом:

background:url(line.gif) no-repeat bottom center;

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

Разделительные линии на сайт с помощью CSS

Картинки в качестве разделительной линии — это, конечно, красиво. Но гораздо круче сделать их на чистом CSS. Они и грузятся быстрее и не зависят от того, включено ли отображение картинок в браузере пользователя или нет.

Подробного описания к примерам не даю, там и так все интуитивно понятно. Просто берете код и добавляете на свой сайт.

18. Разделительные линии для сайта на CSS | Меняем цвет линии

19. Разделительные линии для сайта на CSS | Заголовок с линиями

20. Простые CSS стили для разделительных линий на сайт

21. Стилизация разделительных линий для сайта на CSS

22. Создаем точечные линии через CSS

23. 13 бесплатных разделительных линий для тэга hr

24. 18 простых стилей для разделительных линий на сайт на CSS

25. Стилизация тэга hr при помощи CSS

26. Как с помощью стилей задать цвет линии тега hr

27. Горизонтальные и вертикальные разделительные линии для сайта

Надеюсь, представленной коллекции разделительных линий для сайта вам хватит надолго.

Enjoy!

Автор: Игорь Квентор
www.websovet.com