1.4 Использование тега hr с фоновым изображением

Тег <hr> (горизонтальная линия) является отличным средством для семантического разделения или прерывания контента на странице. Можно заменить его на изображение, которое будет гармонировать с общей стилистикой страницы.

Рис. 3

По умолчанию тег <hr> формирует простую и довольно уродливую линию или монструозную 3D обводку. С помощью свойства CSS background можно задать  использование изображения, обратив внимание на высоту элемента, чтобы использовать только одну копию картинки, и на отсутствие обводки:

hr {

background:url(spiral-shape.png) no-repeat top center;

height:42px;

border:none !important;

}

Как обычно, всю простоту нарушает Internet Explorer (версии 7 и меньше), для которого потребуется использовать специфический код CSS (конечно, если вы собираетесь поддерживать IE). Можно сделать отдельный файл CSS для IE и подключить его к странице с помощью условного комментария, например, так:

<!--[if lte IE 7]>

<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />

<![endif]-->

А для корректного вывода изображения вместо горизонтальной линии использовать следующий код для IE (в файле ie.css):

hr {

display:list-item;

list-style:url(spiral-shape.png) inside;

filter:alpha(opacity=0);/*избавляемся от горизонтальной линии*/

width:0; /* предотвращаем копирование изображения */

margin-top:-10px;

}

Задание

1. Разработать лайтбокс, как описано в п.1.1 теор. сведений, который появляется при щелчке на ссылке в тексте. Содержимое лайтбокса - произвольное.

2. Создать блок div с 7 разноцветными обводками, как на рис. 2. В п. 1.3 теоретических сведений приведен пример получения 5 разноцветных рамок у блока текста. Можно добавить ещё обводки, вставив в блок дочерний тег, например, <p>, и добавив псевдоэлемент до или после него (#borders p:before{…}).

3. Использовать тег <hr> с фоновым изображением (п.1.4 теор. сведений).