Кекстаграм: Начало. CSS-фильтры / Яркость и контрастность, brightness и contrast [1/14]
×

Яркость и контрастность, brightness и contrast [1/14]

CSS-фильтры позволяют применить визуальные эффекты к элементам страницы. Фильтры обычно применяют к изображениям, фонам или рамкам, а иногда и к другим элементам.

Фильтры применяются к элементу до того, как он будет отображён, поэтому количество фильтров влияет на скорость загрузки страницы.

Фильтры задаются с помощью свойства filter. Начнём знакомство с ними.

Яркость — brightness. Допустимы числовые значения от 0 и выше или проценты. Со значением фильтра 1 или 100% элемент отображается без изменений.

.effect {
  filter: brightness(2); /* увеличивает яркость вдвое */
  filter: brightness(10%); /* снижает яркость до 10% */
  filter: brightness(150%); /* увеличивает яркость на 50% */
}

Контрастность — contrast. Как и у фильтра яркости в качестве значения можно использовать числа или проценты.

 .effect {
   filter: contrast(0.5); /* снижает контрастность наполовину */
   filter: contrast(50%); /* тоже снижает контрастность до 50% */
 }

На момент написания курса не все браузеры поддерживают CSS-фильтры. Для корректной работы фильтров в Chrome и Safari необходимо указывать префикс -webkit-. Но в этом курсе мы позаботились о префиксах — они подставляются в мини-браузере автоматически.


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

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

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

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

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