Фильтры (filter: blur, grayscale, etc.): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом разделе вы попрактикуетесь в использовании CSS свойства `filter`. Это свойство позволяет применять графические эффекты, такие как размытие, изменение цвета, яркости, контрастности и другие, к элементам HTML прямо в браузере. Задания построены от простого применения одного фильтра до комбинации нескольких и использования их с псевдоклассами, например, при наведении мыши. Вам нужно будет заполнить пропущенные части CSS кода, чтобы добиться нужного визуального эффекта, который будет отображаться в окне предпросмотра.

Список тем

Размытие изображения

В задании представлено изображение. Ваша задача - применить к нему эффект размытия (blur), используя свойство `filter`. Заполните пропуск в CSS коде, чтобы изображение стало размытым.

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Example Image 1">
</div>

Используйте свойство `filter` со значением функции `blur()`. В скобках укажите степень размытия. Например, `blur(4px)` применит размытие в 4 пикселя.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Черно-белое изображение

Сделайте изображение полностью черно-белым. Используйте соответствующую функцию фильтра CSS. Впишите недостающую функцию и ее значение в свойство `filter`.

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Example Image 2">
</div>

Для преобразования изображения в оттенки серого используется функция `grayscale()`. Значение `1` или `100%` делает изображение полностью черно-белым. Значение `0` или `0%` оставляет исходные цвета.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эффект сепии при наведении

К изображению должен применяться эффект сепии только тогда, когда пользователь наводит на него курсор мыши. Допишите CSS правило для состояния `:hover`, указав свойство `filter` и нужную функцию сепии.

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  transition: filter 0.3s ease;
}

.image-container img:input1 {
  input2: input3;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  transition: filter 0.3s ease;
}

.image-container img:input1 {
  input2: input3;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/4.png" alt="Example Image 4">
</div>

Используйте псевдокласс `:hover` для элемента `img`. Внутри этого правила примените свойство `filter` с функцией `sepia()`. Значение `1` или `100%` дает максимальный эффект сепии. Например: `filter: sepia(80%);` или `filter: sepia(0.8);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация фильтров: Яркость и Контраст

Примените к изображению сразу два фильтра: увеличьте яркость и контрастность. Вам нужно вписать обе функции фильтров в одно свойство `filter`, разделив их пробелом.

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1 input2;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1 input2;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Example Image 5">
</div>

Чтобы применить несколько фильтров одновременно, перечислите их функции через пробел в значении свойства `filter`. Используйте `brightness()` для яркости (значение больше 1 или 100% увеличивает яркость) и `contrast()` для контрастности (значение больше 1 или 100% увеличивает контраст). Например: `filter: brightness(1.2) contrast(1.4);`

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тень через фильтр

Добавьте к изображению тень, используя функцию `drop-shadow()` в свойстве `filter`. Параметры тени уже заданы, вам нужно только вписать имя функции `drop-shadow`.

CSS

.image-container-shadow img {
  width: 80%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 30px auto;
  /* Примените тень с параметрами 5px 5px 10px #555 */
  filter: input1(5px 5px 10px #555);
}

                     .image-container-shadow img {
  width: 80%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 30px auto;
  /* Примените тень с параметрами 5px 5px 10px #555 */
  filter: input1(5px 5px 10px #555);
}

HTML

<div class="image-container-shadow">
  <img src="https://naytikurs.ru/img/6.png" alt="Example Image 6">
</div>

Свойство `filter` позволяет добавлять тень с помощью функции `drop-shadow()`. Эта тень, в отличие от `box-shadow`, учитывает прозрачные области элемента. Вам нужно указать имя функции `drop-shadow` перед заданными параметрами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Инвертирование цветов

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

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Example Image 7">
</div>

Для инвертирования цветов используется функция `invert()`. Значение `1` или `100%` полностью инвертирует цвета. Значение `0` или `0%` оставляет цвета без изменений.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сброс фильтра при наведении

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

CSS

.image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: sepia(100%);
  transition: filter 0.3s ease;
}

.image-container img:hover {
  filter: input1;
}

                     .image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 20px auto;
  filter: sepia(100%);
  transition: filter 0.3s ease;
}

.image-container img:hover {
  filter: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/8.png" alt="Example Image 8">
</div>

Чтобы убрать все фильтры, установите для свойства `filter` значение `none`. Примените это значение к элементу `img` внутри правила для псевдокласса `:hover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Насыщенность текста

Увеличьте насыщенность цвета текста внутри блока `div`. Используйте свойство `filter` и функцию `saturate()`. Впишите недостающее свойство и значение.

CSS

.text-block {
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #e67e22; /* Оранжевый цвет */
  input1: input2;
}

                     .text-block {
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #e67e22; /* Оранжевый цвет */
  input1: input2;
}

HTML

<div class="text-block">
  <p>Этот текст должен стать более насыщенным.</p>
</div>

Свойство `filter` можно применять не только к изображениям, но и к любым HTML-элементам, включая текст. Используйте функцию `saturate()` для управления насыщенностью. Значение больше `1` или `100%` увеличивает насыщенность, меньше - уменьшает. Например, `saturate(3)` утроит насыщенность.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку