Вращение оттенка элемента
Классы hue-rotate-* поворачивают оттенок всех цветов элемента на угол в
градусах. Берите их для цветовых вариантов одной иллюстрации или декоративного
эффекта при наведении.
Пример
Углы
Положительные углы поворачивают оттенок в одну сторону, классы с минусом — в другую. hue-rotate-0 оставляет цвета как есть.
При наведении
Наведите указатель на изображение: оттенки сдвигаются на 180°.
Классы
| Класс | CSS | Значения |
|---|---|---|
hue-rotate-0 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(0deg) |
— |
hue-rotate-15 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(15deg) |
— |
hue-rotate-30 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(30deg) |
— |
hue-rotate-60 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(60deg) |
— |
hue-rotate-90 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(90deg) |
— |
hue-rotate-180 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(180deg) |
— |
-hue-rotate-15 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(-15deg) |
— |
-hue-rotate-30 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(-30deg) |
— |
-hue-rotate-60 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(-60deg) |
— |
-hue-rotate-90 |
--sf-blur:; --sf-brightness:; --sf-contrast:; --sf-grayscale:; --sf-hue-rotate:; --sf-invert:; --sf-saturate:; --sf-sepia:; --sf-drop-shadow:; filter: var(--sf-blur) var(--sf-brightness) var(--sf-contrast) var(--sf-grayscale) var(--sf-hue-rotate) var(--sf-invert) var(--sf-saturate) var(--sf-sepia) var(--sf-drop-shadow); --sf-hue-rotate: hue-rotate(-90deg) |
— |
Условия (что это): ширина экрана — нет; состояния — hover:. Например: hover:hue-rotate-0.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Углы
Угол в градусах записан в имени класса: hue-rotate-0, hue-rotate-15,
hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180.
Отрицательный угол пишется с минусом в начале: -hue-rotate-15,
-hue-rotate-30, -hue-rotate-60, -hue-rotate-90.
<img class="hue-rotate-90" src="illustration.svg" alt="Иллюстрация">
<img class="-hue-rotate-60" src="illustration.svg" alt="Иллюстрация">
Поворот меняет оттенок, но не яркость и насыщенность: серые и чёрно-белые участки остаются прежними.
Ограничения
- На элементе действует один класс фильтра. Каждый класс семейств фильтра
(
blur-*,brightness-*,contrast-*,grayscale,hue-rotate-*,invert,saturate-*,sepia) задаёт свойствоfilterцеликом и сбрасывает функции остальных семейств, поэтому изblur-small grayscaleостаётся только тот класс, чьё правило стоит в CSS позже. Чтобы сложить два фильтра, поставьте второй класс на обёртку. - Класс с
hover:тоже задаёт фильтр целиком: при наведении он заменяет фильтр элемента, а не добавляется к нему. - Любое значение, в том числе
hue-rotate-0, создаёт у элемента новый контекст наложения и содержащий блок для потомков сposition: fixed. - Поворот оттенка не учитывает тему: цвета, подобранные под светлую и тёмную тему, после поворота могут потерять контраст.