Автоматический инверс цвета текста в CSS от фона

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

Если требуется инвертировать цвет текста, достаточно использовать CSS-свойство filter: invert(1);. Это простой и эффективный способ повысить читабельность текста на контрастном фоне.

Пример:

.inverted {
  /* 🎵 Привет из обратного спектра цветов... 🎶 */
  filter: invert(1);
}

Пример применения на практике:

<div style="background-color: #000;">
  <p class="inverted">Текст с инвертированным цветом</p>
</div>

Метод быстр и не требует сложной логики.

Методы динамической коррекции цвета

Применение mix-blend-mode для большей адаптивности

Для настройки под конкретные условия лучше использовать свойство mix-blend-mode в CSS. С режимами 'difference' или 'screen' цвет текста автоматически корректируется под цвет фона, что помогает обеспечить четкость и контрастность.

Пример:

.dynamic-invert {
  /* Цвета контролируют всё! */
  mix-blend-mode: difference;
}

Вот так это применяется в верстке:

<div style="background-color: magenta;">
  <p class="dynamic-invert">Текст, подстраивающийся под фон</p>
</div>

Учитывайте совместимость; свойство mix-blend-mode не поддерживается во всех браузерах.

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

Решение задачи совместимости с применением псевдо-элементов

Если вам необходима более широкая совместимость, поможет использование псевдо-элементов :before и :after. С их помощью можно менять восприятие текста на разном фоне.

Определите класс inverted-bar и задайте для псевдо-элементов ::before и ::after одинаковый текст в контрастных цветах.

Пример:

.inverted-bar::before, .inverted-bar::after {
  /* Двойник! */
  content: "Текст здесь";
  position: absolute;
  top: 0;
  left: 0;
}
.inverted-bar::before {
  /* Светлый оттенок текста */
  mix-blend-mode: screen; /* для светлых фонов */
}
.inverted-bar::after {
  /* Темный оттенок текста */
  mix-blend-mode: difference; /* для темных фонов */
}

Поддержка устаревших браузеров при помощи слоев DIV

Для поддержки устаревших браузеров используйте два DIV с одинаковым текстовым содержимым. Один DIV будет отображать стандартный цвет текста, второй — инвертированный, выбор между ними будет происходить в зависимости от цвета фона.

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

Представьте себе хамелеона (🦎), путешествующего по цветовому кругу:

Фон:           🟥 🟧 🟨 🟩 🟦 🟪
Хамелеон:      🦎🦎🦎🦎🦎🦎
Цвет текста:   🤍 🖤 🖤 🤍 🤍 🖤

Вдохновляясь хамелеоном, текст (цвет шрифта) адаптируется, чтобы сохранять контрастность с любым фоном.

Захватывающие визуальные эффекты с применением псевдо-элементов

Вы можете использовать ::before и ::after для создания поразительных визуальных эффектов. Совмещение уместного линейного градиента фона с mix-blend-mode даёт прекрасный эффект цветного текста.

Взаимодействие с пользователем через эффекты наведения

Предусмотрите взаимодействие с пользователем при помощи адаптивности цвета, активируемой при наведении. Это подчеркнёт динамичность текста и его взаимодействие с фоном.

Улучшение дизайна и адаптивности

Ваш веб-дизайн должен быть отзывчивым и обеспечивать читаемость текста на различных устройствах. Используйте background-position, width, overflow и white-space для детальной настройки позиционирования и видимости.

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

1. Получение значения CSS-вращения через JavaScript | CSS-Tricks – Изучаем доступ к вычисляемым стилям и понимания CSS трансформаций.
2. mix-blend-mode – CSS: Каскадные таблицы стилей | MDN – Полный гид от Mozilla по использованию режимов наложения в CSS.
3. CSS Gradient — Генератор, Maker и фон – Утилита для создания впечатляющих градиентных фонов.
4. Accessible Colors | Проверка соответствия цветовых контрастов стандартам WCAG 2.0 AA и AAA – Проверка по стандартам WCAG 2.0 для цветов, которые соответствуют требованиям доступности.
5. Обеспечение контрастности текста и фона минимум в 7:1 | Техники WCAG 2.0 – Методики W3C для успешной работы с контрастностью.
6. Определение цвета шрифта на основе цвета фона – Изучение и обсуждение методов динамического изменения цвета текста на Stack Overflow.