Стилизация <hr>: создание пунктирной линии CSS

Быстрый ответ

Для того, чтобы задать пунктирную линию, примените следующий CSS-код к тегу <hr/>:

<hr style="border: none; border-top: 1px dotted #000;" />

Этот способ делает границу тега <hr/> незаметной, оставляя лишь видимой верхнюю пунктирную черту.

Стратегии для разностороннего использования <hr/>

Варьируйте оформление <hr/> с помощью разных стилей границ

Пунктир — это только один из вариантов. Рассмотрим различные стили границ для вашего тега <hr/>:

hr.dashed { border-top: 1px dashed #000; } /* Для дизайна, не приемлющего компромиссы */
hr.double { border-top: 3px double #000; } /* В два раза больше стиля и приятных впечатлений */
hr.groove { border-top: 2px groove #000; } /* Эффект выемки для особых ситуаций */

Каждый их этих стилей предлагает вам уникальные визуальные возможности для декоративного разделения контента.

Подробнее об этом расскажет наш спикер на видео

Добавьте цвет и настройте толщину линии <hr/>

Настройте <hr/> по своему усмотрению, выбирая цвет и толщину границы для максимального соответствия вашему дизайну:

hr.fine-dotted { border-top: 1px dotted #aaa; } /* Ненавязчивый стиль */
hr.bold-dotted { border-top: 2px dotted #333; } /* Экспрессивный и уверенный вариант */

Таким образом, разделительная линия будет гармонично вписываться в общую цветовую палитру сайта.

Стандартизация стиля <hr/> путём использования CSS-классов

С помощью CSS-классов можно стандартизировать стилизацию и управлять <hr/> гибко и effektivno:

hr {
  border: none;
  height: 1px;
}

.dotted { border-top: 1px dotted #000; }
.dashed { border-top: 1px dashed #000; }
.double { border-top: 2px double #000; }

Теперь, при необходимости изменить стиль всех <hr/>, достаточно откорректировать всего лишь одну строку кода.

Расширение стиля при помощи псевдоэлементов

Создайте более сложные стили оформления <hr/>, применяя псевдоэлементы ::before и ::after:

hr.decorative::before {
  content: '\00a9';
  display: inline-block;
  margin-right: 10px;
}

hr.decorative::after {
  content: '\00a9';
  display: inline-block;
  margin-left: 10px;
}

Здесь мы добавили символы авторского права к <hr/>, искусственно украсив ваш дизайн, делая его ещё более запоминающимся и уникальным.

Визуализация

Возьмём обычную линию <hr/>:

Сплошная линия <hr/>: -------------------------

А теперь преобразуем её в пунктир с помощью применения небольшого CSS-кода:

.dotted-hr {
  border-top: 0;
  height: 1px;
  background-image: linear-gradient(to right, #000 33%, rgba(255,255,255,0) 0%);
  background-position: top;
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

И это результат — пунктирная линия:

Пунктирная линия <hr/>: • • • • • • • • • • • • • • •

Теперь наш <hr/> стал стильным и современным, и это всё благодаря магии CSS.

Продвинутые рекомендации для мастеров <hr/>

Доступность и адаптивность на всех устройствах

Для сохранения унифицированной эстетики на различных устройствах, рекомендуется использовать медиа-запросы:

@media (max-width: 600px) {
  .dotted-hr {
    background-size: 3px 1px; /* На мобильных устройствах всё меньше... включая точки! */
  }
}

Решение проблем кросс-браузерности

Для обеспечения правильного отображения в разных браузерах следует использовать префиксы или fallback-решения:

.hr-ie {
  border-style: dotted; /* Оптимально для Chrome */
  border-style: dotted\9; /* IE8 тоже не в стороне */
}

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

Оценка эффективности на живых примерах

Живые демонстрации помогут подтвердить эффективность вашего решения:

Посмотрите Живую Демонстрацию Пунктирной Линии <hr/>: [Ссылка на Демо]

Живые примеры дают возможность экспериментировать и модифицировать дизайн, не внося изменения в существующую кодовую базу.

Полезные материалы

1. Примеры стилизации <hr> — подборка идей для создания уникального оформления тега <hr> при помощи CSS.
2. <hr>: Элемент разделения тем (Горизонтальное правило) — Подробное руководство от MDN по использованию элемента <hr>.
3. HTML-тег <hr> — доступное руководство от W3Schools по использованию тега <hr> в HTML.
4. Создание удобной в обслуживании и гибкой CSS-круговой диаграммы с помощью SVG — статья, не напрямую связанная с <hr>, предоставляющая полезные сведения об использовании CSS для создания геометрических фигур, актуальных также и для работы со тегом <hr/>.