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

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

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

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

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

HR как есть

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

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

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

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

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

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

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

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

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

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

Эффект тряски элемента на сайте при наведении с помощью CCS3

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

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

box-sizing: padding-box на Chrome

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

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

Читать

 

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

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



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