Кекстаграм: Эпилог. JavaScript / Кекстаграм: второй фильтр [4/27]
×

Кекстаграм: второй фильтр [4/27]

Мы «переключили» текущий фильтр, а чтобы увидеть его эффект, зададим его стили.

Этот фильтр будет делать фото ещё винтажнее, чем walden: сделает его малоконтрастным, с яркими цветами, небольшим поворотом по цветовому кругу и эффектом сепии.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кекстаграм: второй фильтр</title> <base href="/assets/course98/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="keksta"> <div class="photos"> <div class="photo toaster"></div> </div> <ul class="toggle-controls"> <li class="walden">walden</li> <li class="toaster active">toaster</li> </ul> <script src="script.js"></script> </body> </html>
.photo { background-image: url("img/spb-1.jpg"); } .walden { filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4); } .toaster { }
HTML Academy
  1. Для класса .toaster задайте фильтр со значением contrast(0.67),
  2. затем добавьте в фильтр значение saturate(2.5),
  3. после него значение hue-rotate(-30deg)
  4. и sepia(0.4).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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