Кекстаграм: Начало. CSS-фильтры / Инверсия и насыщенность, invert и saturate [3/14]
×

Инверсия и насыщенность, invert и saturate [3/14]

Ещё два фильтра для цветовых эффектов — инверсия цвета и цветовая насыщенность. Как понятно из названия, при инверсии цвета меняются на противоположные, и мы получаем «негатив» картинки, а цветовая насыщенность делает краски ярче и противоположна по смыслу фильтру обесцвечивания.

Инверсия цвета — invert. Допустимые простые числовые значения от 0 до 1 и процентные значения от 0% до 100%.

.effect {
    filter: invert(1); /* полная инверсия цвета */
    filter: invert(50%); /* инверсия цвета наполовину, все цвета серые */
}

Цветовая насыщенность — saturate. Допустимые простые числовые значения от 0 и выше и процентные значения от 0% и выше. При значении фильтра 1 или 100% элемент отображается без изменений. Если установить нулевое значение, то картинка обесцветится, как при использовании фильтра grayscale.

.effect {
    filter: saturate(2); /* цвета ярче вдвое */
    filter: saturate(50%); /* цвета вдвое бледнее */
    filter: saturate(0); /* обесцвеченная картинка */
}

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Инверсия и насыщенность, invert и saturate</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-2.jpg" alt=""> </div> <div class="compare"> <div class="compare-left invert"> <div class="image"> <img src="img/spb-2.jpg" alt=""> </div> </div> <div class="compare-right saturate"> <div class="image"> <img src="img/spb-2.jpg" alt=""> </div> </div> </div> </body> </html>
.invert img { } .saturate img { }
HTML Academy
  1. Изображению в блоке .invert задайте фильтр invert со значением 0.3,
  2. затем измените значение инверсии на 1,
  3. а для картинки в блоке .saturate фильтр saturate со значением 5.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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