Лінія відрізка

У квитанціях, купонах або газетах іноді можна побачити пунктирну лінію з зображенням ножиць і написом "лінія відрізання". Ця фраза означає, що потрібно відрізати цей шматок по вказаній лінії, щоб в майбутньому використовувати за призначенням. На сайтах подібні інструкції не мають ніякого сенсу, ніхто розумний не буде торкатися монітора ножицями. Але можна використовувати горизонтальну лінію як елемент дизайну сторінки, наприклад, для візуального виділення одного матеріалу від іншого.

Наша лінія буде містити три елементи: саму пунктирну лінію, малюнок половини ножиць і напис "лінія відрізання". На рис. 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).

Залишилося додати текст під лінією. Скористаємося псевдоелементом :after, в поєднанні з властивістю content він дозволяє виводити текст після елемента. Додаємо :after до класу line.

.line:after { 
 content: "Лінія відрізання";
}

Остаточно вирівнюємо текст по центру лінії через властивість text-align і налаштовуємо вигляд тексту.

Простий декоративний елемент, як лінія, показує розділення оформлення і вмісту. Стиль лінії, включаючи текст, формується через CSS. В HTML залишається лише порожній <div> з класом line. Ми можемо легко модифікувати нашу лінію, не торкаючись HTML-коду. Наприклад, замінити малюнок ножиць або вивести текст зверху, а не знизу лінії.