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

Кекстаграм: первый фильтр [2/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 walden"></div> </div> <ul class="toggle-controls"> <li class="walden active">walden</li> </ul> <script src="script.js"></script> </body> </html>
.photo { background-image: url("img/spb-4.jpg"); } .walden { }
HTML Academy
  1. Для класса .walden задайте фильтр со значением contrast(0.9) brightness(1.2),
  2. затем добавьте в фильтр значение hue-rotate(-20deg),
  3. после него значение saturate(1.7)
  4. и sepia(0.4).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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