Автоматична CSS інверсія кольору тексту в залежності від фону

22

Від автора: у даній статті ми поговоримо з Вами про автоматичною CSS інверсії кольору тексту в залежності від фону.

Справа все в тому, що на вихідних в одній відеогрі я помітив цікавий прогрес бар. Цифри і процента перебували всередині шкали, але не рухалися разом із завантаженням. Текст був того ж самого кольору, що і фон заповнювача прогрес бару. У якийсь момент текст мав злитися при перетині з наповнювачем, проте він став білим. Фон заповнювача текст не перекривав. Перша моя думка була, як здерти цей шаблон завантаження, і що доведеться вивчити, щоб повторити його.

Нижче показано, як я впорався з цим завданням. Щоб все правильно відображався, раджу сидіти через останню версію Chrome.

Непогано так? Все це стало можливим завдяки чудовому CSS властивості mix-blend-mode.

Розглянемо розмітку

У блоці .wrapper розташовуються всі елементи. .bg це наша шкала завантаження, збільшується з часом. У блоці .text завантаження буде відображатися у відсотках.

Версія на чистому CSS

«Справжній» завантажувач пишеться на JavaScript і прив’язується до цим даним. Але ми тут просто експериментуємо, так що давайте все зробимо на чистому CSS, навіть лічильник (SCSS для створення циклів). Ставимо наші змінні і стилі для заповнювача .bg:

$loadingTime: 10s;
$color: rgb(255, 0, 0);
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}

Анімація loading буде збільшувати ширину елемента:

@keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}

Можна було б ховати виступаючий фон і одночасно рухати блок за допомогою властивості transform (в цілях продуктивності), але в нашому маленькому демо можна, я думаю, скористатися властивістю animation і анімувати властивість width.

Ми трохи схитрим і будемо використовувати набір псевдокласів з анімацією, щоб оновлювати значення відсотка всередині прогрес бару. Спершу, ми залишимо наш DIV порожнім. Для цього додамо псевдоклас :after, і встановимо властивість content 0%. Все це буде продовжуватися до початку анімації:

.text {
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: «0%»;
display: block;
text-align: center;
animation: percentage $loadingTime linear infinite;
}
}

І по суті нам потрібно, щоб в нашій анімації percentage оновлювалося властивість content, від одного до 100, ось так:

@keyframes percentage {
0% {
content: «0%»;
}
1% {
content: «1%»;
}
/* … */
100% {
content: «100%»;
}
}

Але замість того, щоб писати вручну 100 значень, напишемо цикл @for в Sass:

@keyframes percentage {
@for $i from 1 through 100 {
$value: $i + «%»;
#{$value} {
content: $value;
}
}
}

Якщо трохи незрозуміло, не лякайтеся! На третьому рядку до поточного значення в циклі ми додаємо символ «%», тим самим отримуючи рядок. Потім, за допомогою інтерполяції ми підставляємо у властивість content правильне значення на кожній ітерації @keyframe анімації.

Зміна кольору

Нам залишилося встановити колір і задати властивість mix-blend-mode до нашого псевдоклассу і готово; завантажувач, виконаний виключно на CSS, в якому фон заповнювача впливає на колір тексту:

.text:after {
/* значення протилежне фону заповнювача */
color: rgb(0, 255, 255);
mix-blend-mode: difference;
}

Значення режиму накладення difference для тексту змінює його колір на протилежний фону. Тобто якщо наш фон rgb(0, 0, 0), то в псевдоклассе потрібно встановити rgb(255, 255, 255).

Думаю, цей маленький приклад наочно показує корисність такої властивості як mix-blend-mode. Текст інвертується в залежності від кольору перекриває його об’єкта, навіть якщо закрита тільки частина букви. Якщо ви шукаєте ще приклади на тему «зміна кольору тексту для більшої контрастності», Sass вам допоможе.

Ще один приклад

На сайті XOXO застосовується режим накладення mix-blend-mode: darken;. Фон, текст, будь-які фігури, взаємодіє між собою. Досить цікавий варіант, який не зустрінеш на інших сайтах в інтернеті.

Автоматична CSS інверсія кольору тексту в залежності від фону

Підтримка браузерів

На даний момент властивість mix-blend-mode і анімація content погано підтримуються. Якщо збираєтеся використовувати обидва властивості, не забудьте про фолбэк під старі браузери.