От автора: в данной статье мы поговорим с Вами об автоматической CSS инверсии цвета текста в зависимости от фона.
Дело все в том, что на выходных в одной видеоигре я заметил интересный прогресс бар. Цифры и значок процента находились внутри шкалы, но не двигались вместе с загрузкой. Текст был того же самого цвета, что и фон заполнителя прогресс бара. В какой-то момент текст должен был слиться при пересечении с наполнителем, однако он стал белым. Фон заполнителя текст не перекрывал. Первая моя мысль была, как содрать этот шаблон загрузки, и что придется изучить, чтобы повторить его.
Ниже показано, как я справился с данной задачей. Чтобы все правильно отображалось, советую сидеть через последнюю версию Chrome.
Неплохо да? Все это стало возможным благодаря замечательному CSS свойству mix-blend-mode.
Рассмотрим разметку
|
1 2 3 4 5 |
<div class="wrapper"> <div class="bg"> <div class="text"></div> </div> </div> |
В блоке .wrapper располагаются все элементы. .bg это наша шкала загрузки, увеличивающаяся со временем. В блоке .text будет отображаться загрузка в процентах.
Версия на чистом CSS
«Настоящий» загрузчик пишется на JavaScript и привязывается к настоящим данным. Но мы тут просто экспериментируем, так что давайте все сделаем на чистом CSS, даже счетчик (SCSS для создания циклов). Задаем наши переменные и стили для заполнителя .bg:
|
1 2 3 4 5 6 7 |
$loadingTime: 10s; $color: rgb(255, 0, 0); .bg { background-color: $color; animation: loading $loadingTime linear infinite; } |
Анимация loading будет увеличивать ширину элемента:
|
1 2 3 4 5 6 7 |
@keyframes loading { 0% { width: 0; } 100% { width: 100%; } } |
Можно было бы прятать выступающий фон и одновременно двигать блок с помощью свойства transform (в целях производительности), но в нашем маленьком демо можно, я думаю, воспользоваться свойством animation и анимировать свойство width.
Мы немного схитрим и будем использовать набор псевдоклассов с анимацией, чтобы обновлять значение процента внутри прогресс бара. Сперва, мы оставим наш DIV пустым. Для этого добавим псевдокласс :after, и в установим свойство content в 0%. Все это будет показываться до начала анимации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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, вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes percentage { 0% { content: "0%"; } 1% { content: "1%"; } /* ... */ 100% { content: "100%"; } } |
Но вместо того, чтобы писать вручную 100 значений, напишем цикл @for в Sass:
|
1 2 3 4 5 6 7 8 |
@keyframes percentage { @for $i from 1 through 100 { $value: $i + "%"; #{$value} { content: $value; } } } |
Если немного непонятно, не пугайтесь! На третьей строке к текущему значению в цикле мы добавляем символ «%», тем самым получая строку. Затем, с помощью интерполяции мы подставляем в свойство content правильное значение на каждой итерации @keyframe анимации.
Изменение цвета
Нам осталось установить цвет и задать свойство mix-blend-mode к нашему псевдоклассу и готово; загрузчик, выполненный исключительно на CSS, в котором фон заполнителя влияет на цвет текста:
|
1 2 3 4 5 |
.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;. Фон, текст, любые фигуры, все взаимодействует между собой. Довольно интересный вариант, который не встретишь на других сайтах в интернете.
Поддержка браузеров
На данный момент свойство mix-blend-mode и анимация content плохо поддерживаются. Если собираетесь использовать оба свойства, не забудьте про фолбэк под старые браузеры.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)