Html вертикальное отделение как hr

Как сделать горизонтальную пунктирную линию с рисунком?

Сделать горизонтальную пунктирную линию с изображением ножниц.

Решение

В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.

Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 1 показано, что хотелось бы получить в итоге.

Рис. 1. Горизонтальная линия

В идеале, линия должна формироваться единственным тегом , а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top . Если бы рисунок выводится над линией, соответственно потребуется border-bottom . Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.

.line < border-top: 1px dashed #000; /* Параметры линии */ height: 18px; /* Высота блока */ background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */ >

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after , в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line .

.line:after

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Линия отреза   Текст до
 Текст после

Браузеры

Браузер IE6-7 не поддерживает псевдоэлемент :after , поэтому текст под линией в нём выводиться не будет.

Hr HTML

Как правило, разделители на сайте используются для визуального отделения цитат и других смысловых блоков от основного контента страницы. Горизонтальные разделители для сайта могут быть проставлены с помощью тега hr. Выглядит горизонтальный разделитель следующим образом:

Тег hr может принимать следующие атрибуты:

align — устанавливает выравнивание разделителя (right, center или left);
color — задает цвет линии;
size — определяет толщину линии;
width — задает ширину линии;
noshade — отменяет трехмерный эффект линии.

Применим теперь указанные атрибуты к горизонтальному разделителю:

   
Был бы двор, придворные найдутся.

Результат приведенного примера:

Был бы двор, придворные найдутся.

Стилизация разделителей с помощью CSS

Настроить отображение горизонтальных разделителей можно и с помощью CSS, и этот подход является более правильным. Ведь согласитесь, прописывать большой набор атрибутов при каждом добавлении линии — подход не совсем верный. Стилизацию hr CSS рассмотрим на следующем примере:

   Стилизуем горизонтальные разделители с помощью CSS     
 Был бы двор, придворные найдутся.

В конструкторе сайтов «Нубекс» есть несколько различных стилизованных разделителей, встраиваемых в контент сайта. Для получения более подробной информации читайте статью: Разделители для сайта.

Смотрите также:

Шрифты CSS
Как ставить кавычки
Тень текста
Цитата HTML

Вертикальный разделитель

Используйте вспомогательную функцию настраиваемых вертикальных правил для создания вертикальных разделителей, таких как элемент

На этой странице На этой странице

Как это устроено

Вертикальные правила основаны на элементе

, позволяющем создавать вертикальные разделители в общих макетах. Они стилизованы так же, как элементы

Они имеют ширину 1px
У них min-height равняется 1em
Их цвет устанавливается через currentColor и opacity

При необходимости настройте их дополнительными стилями.