Свойства CSS «filter» и «backdrop-filter»

blur() — функция размытия

Функция blur() - это один из самых популярных и часто используемых фильтров. Ее основное предназначение — размыть содержимое элемента, к которому она применена, создавая эффект недостаточной резкости или глубины резкости. Этот эффект достигается за счет алгоритма, который усредняет цвета соседних пикселей в заданном радиусе.

Как работает blur(): Вы задаете единственный параметр — радиус размытия. Этот параметр определяет, насколько далеко друг от друга пиксели будут «смешиваться» для создания эффекта размытия. Значение указывается в пикселях (px) или других единицах длины, поддерживаемых CSS (например, rem, em). Чем больше значение радиуса, тем сильнее будет эффект размытия. Значение 0 оставляет изображение полностью резким.

img:hover {
    filter: blur(0px);
}

brightness() — функция яркости

Функция brightness() - позволяет линейно изменять яркость элемента. Она воздействует на все цветовые каналы (красный, зеленый, синий) одновременно, делая изображение светлее или темнее.

Как работает функция brightness(): Значение параметра представляет собой множитель. Значение 1 соответствует исходной яркости элемента. начения больше 1 (например, 1.5, 2) увеличивают яркость, делая элемент светлее. Значения меньше 1 (например, 0.7, 0.5) уменьшают яркость, затемняя элемент. Значение 0 превращает элемент в полностью черный прямоугольник.

Эта функция незаменима для создания эффектов при наведении (hover), когда нужно визуально «подсветить» кнопку, или для корректировки слишком темных или слишком светлых изображений прямо в браузере.

img:hover {
    filter: brightness(100%);
}

grayscale() — функция обесцвечивания

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

Как работает функция grayscale(): Параметр функции задает степень обесцвечивания и указывается в долях от 0 до 1 или в процентах от 0% до 100%. grayscale(0) или grayscale(0%) — исходные цвета. grayscale(1) или grayscale(100%) — полностью черно-белое изображение. grayscale(0.5) или grayscale(50%) — частичное обесцвечивание, создающее эффект сепии или приглушенных цветов.

Часто применяется для изображений в галереях при наведении (чтобы цветное изображение «проявлялось»), для оформления мемориальных сайтов или для придания строгого, делового стиля.

img:hover {
    filter: grayscale(0%);
}

contrast() — функция контрастности

Функция contrast() - регулирует разницу между самыми темными и самыми светлыми участками элемента. Высокий контраст делает темные области еще темнее, а светлые — еще светлее, подчеркивая детали. Низкий контраст, наоборот, сближает тона, делая изображение более плоским и блеклым.

Как работает contrast(): Как и brightness(), эта функция использует множитель. Значение 1 оставляет исходную контрастность. Значения больше 1 (например, 1.5, 2) усиливают контраст. Значения меньше 1 (например, 0.5) уменьшают контраст. Значение 0 сделает элемент равномерно серым.

Используется для коррекции качества изображений или для создания определенных стилистических эффектов, например, для имитации старой фотографии (пониженный контраст).

img:hover {
    filter: contrast(50%);
}

drop-shadow() - фильтр тени

drop-shadow() - добавляет тень к элементу. Она визуально похожа на свойство box-shadow, но имеет ключевое отличие: drop-shadow() учитывает форму непрозрачных частей элемента, включая альфа-канал.

Как работает drop-shadow(): Синтаксис схож с box-shadow. Это особенно полезно для PNG-изображений с прозрачным фоном. box-shadow создаст тень от прямоугольного контейнера изображения, а drop-shadow() создаст тень, повторяющую форму самого объекта на изображении (например, звезды, логотипа, иконки).

img:hover {
    filter: drop-shadow(10px 10px 10px blue);
}

hue-rotate() - функция сдвига цветового тона

Это одна из самых мощных и творческих функций. hue-rotate() сдвигает все цвета элемента вдоль цветового круга на заданный угол.

Как работает hue-rotate(): Параметр задается в градусах (deg). Каждому градусу соответствует определенный оттенок на цветовом круге. hue-rotate(0deg) — цвета остаются без изменений. hue-rotate(180deg) — кардинально меняет цвета на противоположные (аналогично негативу, но не совсем). hue-rotate(90deg) — сдвигает все цвета, например, синий может стать зеленым, а красный — синим.

Позволяет динамически генерировать различные цветовые схемы из одного исходного изображения или иконки, что крайне полезно для создания тематических режимов (светлая/темная тема) или интерактивных эффектов.

img:hover {
    filter: hue-rotate(20deg);
}

invert() - функция инверсии

invert() инвертирует цвета элемента, создавая эффект, похожий на фотографический негатив.

Как работает invert(): Параметр, как и у grayscale или sepia, задается в долях или процентах. invert(0) — исходные цвета. invert(1) или invert(100%) — полная инверсия (белый становится черным, красный — голубым и т.д.). invert(0.75) — частичная инверсия, создающая сюрреалистичные цветовые комбинации.

Может использоваться для создания специального «ночного» режима для изображений или для креативных визуальных эффектов.

img:hover {
    filter: invert(10%);
}

opacity() — функция прозрачности

opacity() регулирует прозрачность элемента. По своему действию она аналогична стандартному CSS-свойству opacity, но является частью фильтров, что позволяет комбинировать ее с другими эффектами в одном объявлении filter.

Как работает opacity(): Значение от 0 до 1 (или от 0% до 100%) определяет степень непрозрачности. opacity(1) — полностью непрозрачный. opacity(0) — полностью прозрачный. opacity(0.5) — полупрозрачный на 50%.

img:hover {
    filter: opacity(50%);
}

saturate() — функция насыщенности

saturate() - управляет насыщенностью (интенсивностью ) цветов элемента.

Как работает saturate(): Использует множитель. saturate(1) — исходная насыщенность. Значения больше 1 (например, 1.5, 3) увеличивают насыщенность, делая цвета более яркими и сочными. Значения меньше 1 (например, 0.5, 0) уменьшают насыщенность. saturate(0) полностью убирает цвет, превращая элемент в градации серого (аналогично grayscale(100%)).

img:hover {
    filter: saturate(50%);
}

sepia() — функция сепии

sepia() - придает элементу коричневатый оттенок, имитируя эффект старинной фотографии.

Как работает sepia(): Механика аналогична grayscale(). Параметр от 0 до 1 (или от 0% до 100%) определяет интенсивность эффекта. sepia(0) — исходные цвета. sepia(1) — полное применение эффекта сепии.

img:hover {
    filter: sepia(50%);
}