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

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

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

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

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

HR как есть

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

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

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

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

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

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

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

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

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

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

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

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

Читать

 

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

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



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