CSS фильтры
CSS-фильтры — это мощный инструмент, который авторы могут использовать для достижения различных визуальных эффектов (что-то вроде фильтров Photoshop для браузера). Свойство фильтра CSS обеспечивает доступ к таким эффектам, как размытие или смещение цвета при визуализации элемента до его отображения. Фильтры обычно используются для настройки рендеринга изображения, фона или границы.
Хотите разобраться в CSS? Проходите бесплатный онлайн-курс по CSS на нашей платформе
Синтаксис:
.filter-me {
filter: blur(3px);
filter: grayscale(1);
filter: saturate(2.2);
filter: none; /* удаляет фильтры */
}Существует ряд функций, которые можно использовать в качестве значений:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
Можно использовать несколько функций, разделенных пробелом:
.do-more-things {
filter: blur(20px) grayscale(20%);
}
See the Pen
CSS filter Editor by Mads Stoumann (@stoumann)
on CodePen.0
Функции фильтра
Чтобы использовать свойство фильтра CSS, укажите значение для одной из следующих функций, перечисленных выше. Если значение неверно, функция возвращает «none». Функции, которые принимают значение, выраженное знаком процента (например, 34%), также принимают значение, выраженное в виде десятичной дроби (например, 0,34 = 34%).
Вот демонстрация, которая позволяет вам немного поиграть с отдельными фильтрами:
See the Pen
Play with Individual CSS filters by Chris Coyier (@chriscoyier)
on CodePen.0
grayscale()
filter: grayscale(20%) /* тоже самое, но десятичной... */ filter: grayscale(0.2);
Преобразует исходное изображение в оттенки серого. Значение в скобках определяет долю конверсии. Значение 100% полностью окрашивает в оттенки серого. Значение 0% оставляет изображение без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
sepia()
filter: sepia(0.8); /* тоже самое, но десятичной... */ filter: sepia(80%);
Преобразует исходное изображение в сепию. Значение в скобках определяет долю конверсии. Значение 100% полностью окрашивает в сепию. Значение 0% оставляет изображение без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
saturate()
filter: saturate(2);
/* тоже самое, но десятичной... */
filter: saturate(200%);Насыщает цветами исходное изображение. Значение в скобках определяет долю конверсии. Значение 0% делает изображение ненасыщенным. Значение 100% оставляет изображение без изменений. Допускаются значения более 100%, обеспечивающие сверхнасыщенные результаты. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
hue-rotate()
filter: hue-rotate(180deg);
/* тоже самое, но десятичной... */
filter: hue-rotate(0.5turn);Применяет поворот оттенка к входному изображению. Значение «угла» определяет количество градусов вокруг цветового круга, на которое будут скорректированы входные образцы. Значение 0deg оставляет ввод без изменений. Если параметр «угол» отсутствует, используется значение 0 градусов. Максимальное значение 360 градусов.
invert()
filter: invert(100%);
Инвертирует изображение. Значение определяет долю конверсии. Значение 100% полностью инвертируется. Значение 0% оставляет изображение без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
opacity()
filter: opacity(0.5);
/* тоже самое... */
filter: opacity(50%);Применяет прозрачность к изображениям. Значение определяет долю конверсии. Значение 0% полностью прозрачно. Значение 100% оставляет без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Это эквивалентно умножению образцов входного изображения на количество. Если параметр «количество» отсутствует, используется значение 100%.
Эта функция аналогична более известному свойству opacity; разница в том, что с фильтрами некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности. Отрицательные значения не допускаются.
brightness()
filter: brightness(0.5);
/* тоже самое... */
filter: brightness(50%);Применяет линейный множитель к входному изображению, делая его более или менее ярким. Значение 0% создаст полностью черное изображение. Значение 100% оставляет без изменений. Другие значения являются линейными множителями эффекта. Допускаются значения суммы более 100%, обеспечивающие более яркие результаты. Если параметр «количество» отсутствует, используется значение 100%.
contrast()
filter: contrast(4);
/* тоже самое... */
filter: contrast(400%);Регулирует контрастность. Значение 0% создаст полностью черное изображение. Значение 100% оставляет без изменений. Допускаются значения выше 100%, что дает результаты с меньшей контрастностью. Если параметр «количество» отсутствует, используется значение 100%.
blur()
filter: blur(5px);
filter: blur(1rem);Применяет размытие по Гауссу к изображению. Значение «радиуса» определяет значение стандартного отклонения функции Гаусса или количество пикселей на экране, переходящих друг в друга, поэтому большее значение создаст большее размытие. Если параметр не указан, используется значение 0. Параметр указывается как длина CSS, но не принимает процентные значения.
drop-shadow()
filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.5));
filter: drop-shadow(4px 4px red); /* без блюра *Применяет эффект тени к входному изображению. Падающая тень фактически представляет собой размытую, смещенную версию альфа-маски входного изображения, нарисованную определенным цветом, наложенную под изображением. Функция принимает параметр типа (определенный в CSS3 Backgrounds), за исключением того, что ключевое слово «inset» не разрешено.
Эта функция похожа на более известное свойство box-shadow; разница в том, что с фильтрами некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности.
Drop-shadow также естественным образом имитирует очертания намеченных объектов, в отличие от box-shadow, который рассматривает только прямоугольник как свой путь.
See the Pen
Drop-shadow vs box-shadow (2) by Kseso (@Kseso)
on CodePen.0
Как и в случае с text-shadow, здесь нет параметра «распространение» для создания сплошной тени, большей, чем объект.
url()
filter: url()
Функция url() принимает местоположение XML-файла, в котором указан фильтр SVG, и может включать привязку к определенному элементу фильтра. Пример:
See the Pen
URL Filter by GRAY GHOST (@grayghostvisuals)
on CodePen.0
Анимация фильтров
Поскольку фильтры можно анимировать, они могут открыть двери для целой кучи развлечений:
See the Pen
Filter Animation by Chris Coyier (@chriscoyier)
on CodePen.0
Понравилась статья и хотите узнать больше о CSS? Или просто хотите проверить свои знания? Проходите мой авторский курс по CSS/CSS3.
Комментарии