Категория > Линии и рамки > Сделать горизонтальную пунктирную линию с рисунком - «Линии и рамки»

Сделать горизонтальную пунктирную линию с рисунком - «Линии и рамки»


25-03-2016, 16:15. Автор: Administrator
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

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

 


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

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

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

<div class="line"></div>

Поскольку ножницы выводятся под линией, то воспользуемся свойством 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 { 
 content: "Линия отреза";
}

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

Пример 1. Линия

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия отреза</title>
  <style>
   .line {
    text-align: center; /* Выравниваем текст по центру */
    border-top: 1px dashed #000; /* Параметры линии  */
    height: 18px; /* Высота блока */
    background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
   }
   .line:after { 
    content: "Линия отреза"; 
    font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
    font-size: 12px; /* Размер шрифта */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <p>Текст до</p>
  <div class="line"></div>
  <p>Текст после</p>
 </body>
</html>

Браузеры

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

Перейти обратно к новости