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

Инверсия и насыщенность, invert и saturate

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

Инверсия цвета — 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); /* обесцвеченная картинка */
}

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 27 мая цена 22 900 ₽

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

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

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

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

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

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