Сделать горизонтальную пунктирную линию с рисунком - «Линии и рамки» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 19 апрель 2023, 08:23
Причины популярности камеры GoPro и особенности современной техники
Популярные статьи
  • 20 апрель 2024, 00:00
Учёные создали дрон, который летает исключительно на энергии Солнца - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 19 апрель 2023, 08:23
Причины популярности камеры GoPro и особенности современной техники
  • 15 март 2020, 12:20
? ССЫЛКА НА Maestro - «Видео уроки - CSS»
25-03-2016, 16:15
Сделать горизонтальную пунктирную линию с рисунком - «Линии и рамки»
Рейтинг:
Категория: Самоучитель CSS / Линии и рамки
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, поэтому текст под линией в нём выводиться не будет.


Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0 8.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Сделать горизонтальную пунктирную линию с изображением ножниц. Решение В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого. Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис.
Просмотров: 44 330
Комментариев: 0:   25-03-2016, 16:15
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
Комментарии для сайта Cackle
ДОБАВИТЬ БАННЕР