• Теория
  • Теория

Комбинация фильтров

К одному и тому же блоку можно применить несколько фильтров одновременно. Для этого все фильтры просто перечисляются через пробел после слова filter:

.effect {
  filter: sepia(50%);
  filter: sepia(50%) blur(5px);
  filter: sepia(50%) blur(5px) opacity(50%);
}

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

Опробуем это на практике.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Начало. CSS-фильтры» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.

Зарегистрироваться