Создание уведомлений с числом в CSS: кросс-браузерное решение

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

Создание красного значка уведомлений, в котором отображается число, можно реализовать с помощью небольшого и эффективного CSS кода. Вот пример кода, который вы можете непосредственно использовать в своем проекте:

HTML:

<button class="icon-button">
  Уведомления
  <span class="badge">1</span>
</button>

CSS:

.icon-button {
  position: relative;
  /* Настройка кнопки для последующего использования */
}

.badge {
  background: red;
  color: white;
  border-radius: 50%;
  padding: 0.25em 0.4em;
  font-size: 0.75em;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  min-width: 1em;
  height: 1em;
  text-align: center;
  line-height: 1em;
}

Благодаря этим стилям вы получите яркий, центрированный индикатор на красном фоне, который эффективно уведомляет о поступлении новых сообщений.

Полезные настройки значка

Создание адаптивного значка

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

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

Динамическое выравнивание содержимого

Для того чтобы содержимое значка правильно выравнивалось при его изменении, примените Flexbox. Эта технология позволяет адекватно приспосабливаться к изменению длины содержимого без ущерба для дизайна.

CSS Flexbox для элемента .badge:

display: flex;
justify-content: center;
align-items: center;

Интерактивное обновление содержимого

Сделайте значок более реактивным, используя JavaScript для обновления счетчика уведомлений в зависимости от действий пользователя.

JavaScript для обновления значка:

const badge = document.querySelector('.badge');
// Функция для обновления числа отображаемого значком 
function updateBadgeCount(newCount) {
  badge.textContent = newCount;
}

Добавление плавных анимаций

Добавьте динамики значку, применив CSS-переходы, которые позволят реализовать изящные анимации. Важно, чтобы они были ненавязчивыми и не отвлекали от основного контента.

Переходы CSS для элемента .badge:

transition: transform 0.3s ease-in-out;
&:not(.empty) {
  transform: scale(1.1) translate(50%, -50%);
}

Отображение значка и доступность

Улучшение визуального восприятия за счет SVG

Повысьте визуальную привлекательность значка с помощью SVG, и получите четкие и масштабируемые векторы для более детализированного отображения значка.

Обеспечение доступности

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

HTML с атрибутами доступности:

<span class="badge" role="status" aria-live="polite">1</span>

Совместимость с различными браузерами

Проверьте корректность работы в различных браузерах, чтобы гарантировать корректное отображение вашего творения везде.

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

Представьте ваше приложение как дом, где красный значок уведомлений – это флажок на почтовом ящике:

🏠: [Ваше приложение] 📫: [Значок уведомлений в виде флажка] 📨: [Число внутри значка]

Если нет сообщений, то уведомлений нет:

📫🏠: "Тишина... всё выглядит нормально."

Когда появляются новые сообщения:

📫🏠: "📨х1, 📨х2, 📨х3 и так далее... Время действовать!"

Живая демонстрация

Живая демонстрация поможет четко показать поведение элемента и его адаптивность к изменению размера текста.

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

Тестирование и исправление ошибок

Неважно, какой у вас ссылочный значок, его необходимо тщательно тестировать:

• Проверьте визуальное отображение значка при изменении количества уведомлений.
• Оценивайте его функционирование на различных устройствах.
• Проведите тесты для проверки восприятия людьми с различными видами нарушения зрения.

Внимательно следите за обратной связью пользователей и своевременно исправляйте возникающие ошибки.

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

1. ::after – CSS: Cascading Style Sheets | MDN — документация MDN о псевдоэлементе ::after.
2. Как Создать Значок с CSS — понятное и доступное руководство W3Schools по созданию числовых значков при помощи CSS.
3. YouTube — видеоурок по созданию значков для визуального формата обучения.
4. Урок | DigitalOcean — полезная статья об использовании Sass для настройки стилей значков.
5. Жизненный цикл активности Android и управление памятью JNI – Stack Overflow — хотя эта тема кажется не совсем связанной, кто знает, откуда придет вдохновение для новой идеи?