• Теория
  • Теория

Поворот цвета, hue-rotate

Смещённый на 60 градусов цвет на цветовом колесе

Ещё один интересный цветовой фильтр — поворот цвета hue-rotate. Если представить все цвета в виде круга, то этим фильтром можно повернуть цвет картинки вдоль круга на определённый угол.

Кстати, похожую функцию цветового поворота мы рассматривали в части по препроцессору Less.

Итак, поворот цвета — hue-rotate. Значение задаётся в градусах от 0deg до 360deg. Допускается также использование отрицательного угла. Положительное значение будет вращать цвет по часовой стрелке, а отрицательное — против. При значении фильтра 0deg элемент отображается без изменений.

Примеры:

.effect {
  filter: hue-rotate(90deg); /* поворот на 90 градусов по часовой */
  filter: hue-rotate(-90deg); /* поворот на 90 градусов обратно */
}

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Начало. CSS-фильтры» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.