Кекстаграм: Начало. CSS-фильтры / Бесцветность и сепия, grayscale и sepia [2/14]
×

Бесцветность и сепия, grayscale и sepia [2/14]

Следующие два фильтра исторически относятся к фотографии: изначально фотографии были чёрно-белые или коричневатого оттенка краски сепии.

С помощью фильтров бесцветности и сепии фотографиям можно придать эффект «старины».

Бесцветность — grayscale. Допустимы числовые значения от 0 до 1 и процентные значения от 0% до 100%. При значениях 0 или 0% элемент отображается без изменений.

.effect {
    filter: grayscale(1); /* полное обесцвечивание */
    filter: grayscale(50%); /* обесцвечивание наполовину */
}

Сепия — sepia. Допустимые значения такие же, как у grayscale.

.effect {
    filter: sepia(1); /* полный эффект сепии */
    filter: sepia(25%); /* эффект сепии применяется на 25% */
}

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

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

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

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

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