Цвет HR — как изменить в CSS

Горизонтальная линия HR — независимый HTML элемент — вызывает много вопросов у начинающих. Основная проблема — установка цвета.

Установка стилей color и background-color не приведут к желаемому результату, т.к. hr по-умолчанию — это контейнер нулевой высоты.

Цвет контейнера задаётся стилями границ (border).

Рассмотрим базовый вариант тега и его стили.

HR как есть

Имеет вот такие стили (они зависят от браузера, я взял то, что выдаёт developer tools в opera).

Никакого намека на цвет. Но мы ясно видим, что высота блока нулевая, и есть границы. Т.е. общая высота hr составляет 2 пикселя.

HR noshade — без полутени

Аттрибут noshade добавляет целую пачку исправлений, которые сводятся к правилу:

Они убирают эффект тени, когда нижняя граница рисуется светлее.

Установим цвет hr

Как видим, HR это точно такой же блочный контейнер как и многие другие HTML теги. Я бы не стал для настроек цвета использовать цвет границы, как задумано изначально. А сделал бы примерно вот так:

Но можно и вот так:

Мало букафф? Читайте есчо !

Битые картинки vs CSS

Февраль 6, 2021 г.

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как ...

Читать

Способы прижать HTML элемент к нижнему краю экрана

Сентябрь 14, 2015 г.

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

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

Перенос слов в CSS

Март 28, 2016 г.

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства - word-wrap и word-break. Работу с ними и ...

Читать
 

Комментарии к «Цвет HR — как изменить в CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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