| 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 class="line"></div></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 class="line"></div>
<p>Текст після</p>
</body>
</html>
Браузери
Браузер IE6-7 не підтримує псевдоелемент :after, тому текст під лінією в ньому виводитися не буде.