Кекстаграм: Начало. CSS-фильтры / Поворот цвета, hue-rotate [4/14]
×

Поворот цвета, hue-rotate [4/14]

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

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

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

Примеры:

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

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Поворот цвета, hue-rotate</title> <base href="/assets/course97/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body> <div class="image"> <img src="img/spb-1.jpg" alt=""> </div> <div class="compare"> <div class="compare-left hue-rotate"> <div class="image"> <img src="img/spb-1.jpg" alt=""> </div> </div> <div class="compare-right hue-rotate-reverse"> <div class="image"> <img src="img/spb-1.jpg" alt=""> </div> </div> </div> </body> </html>
.hue-rotate img { } .hue-rotate-reverse img { }
HTML Academy
  1. Изображению .hue-rotate img задайте фильтр hue-rotate со значением 90deg,
  2. затем измените значение на 270deg.
  3. Изображению .hue-rotate-reverse img задайте фильтр поворота цвета -180deg.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.