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

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

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

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

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

HR как есть

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

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

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

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

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

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

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

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

Написать комментарий

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

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

Читать

box-sizing: padding-box на Chrome

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

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-67995ebf28c8e310867657/] Во ...

Читать

 

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

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



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