Перейти к основному содержимому

🎨 Витрина стилей горизонтальных линий (hr)

Демонстрация современных стилей для тега hr в духе Tailwind CSS.

📏 Базовый стиль hr​

Современная линия с градиентом и hover-эффектами:

Эффект: При наведении на область документа линия становится ярче и толще!

🎯 Модификаторы стилей​

Толстая линия​

Добавьте className="hr-thick" для акцентной линии:

<hr className="hr-thick" />

Пунктирная линия​

Добавьте className="hr-dotted" для дискретного разделения:

<hr className="hr-dotted" />

Радужная линия​

Добавьте className="hr-rainbow" для яркого акцента:

<hr className="hr-rainbow" />

Анимированная линия​

Добавьте className="hr-animated" для плавного мерцания:

<hr className="hr-animated" />

Короткая центрированная линия​

Добавьте className="hr-short" для элегантного разделения:

<hr className="hr-short" />

Двойная линия​

Добавьте className="hr-double" для формального разделения:

<hr className="hr-double" />

🌙 Поддержка темной темы​

Все стили hr автоматически адаптируются под темную тему:

  • ✅ Базовые линии становятся светлее
  • ✅ Пунктирные линии меняют цвет
  • ✅ Hover-эффекты сохраняются
  • ✅ Анимации работают корректно

📱 Адаптивность​

На мобильных устройствах:

  • ✅ Уменьшенные отступы (1.5rem вместо 2rem)
  • ✅ Короткие линии становятся шире (70% вместо 50%)
  • ✅ Все эффекты сохраняются

🎨 Технические детали​

Базовая реализация:​

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.6), transparent);
  margin: 2rem 0;
  transition: all 0.3s ease;
}

Hover-эффект:​

.markdown:hover hr {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), rgba(147, 197, 253, 0.6), rgba(59, 130, 246, 0.4), transparent);
  height: 2px;
  transform: scaleY(1.5);
}

Анимированная линия:​

.hr-animated {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.8), rgba(59, 130, 246, 0.3), transparent);
  background-size: 200% 100%;
  animation: hr-shimmer 3s ease-in-out infinite;
}

♿ Доступность​

  • ✅ Анимации отключаются при prefers-reduced-motion: reduce
  • ✅ Контрастность соответствует WCAG
  • ✅ Семантическая корректность сохранена

🎯 Результат​

Теперь все горизонтальные линии в документации имеют:

  • ✅ Современный дизайн в стиле Tailwind CSS
  • ✅ Красивые градиенты и переходы
  • ✅ Hover-эффекты и анимации
  • ✅ Поддержку темной темы
  • ✅ Адаптивность для мобильных
  • ✅ Множество модификаторов для разных случаев
  • ✅ Полную доступность

🎮 Интерактивность: Попробуйте навести курсор на любую область документа с линиями выше!