CSS-фильтры - это мощный инструмент, который авторы могут использовать для достижения различных визуальных эффектов (вроде фильтров Photoshop для браузера). Свойство CSS filterобеспечивает доступ к таким эффектам, как размытие или смещение цвета при визуализации элемента перед его отображением. Фильтры обычно используются для настройки рендеринга изображения, фона или границы.
Синтаксис:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Для этого значения можно использовать несколько функций:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- для применения SVG-фильтровcustom()- "скоро будет"
Можно использовать несколько функций, разделенных пробелами.
.do-more-things ( filter: blur(20px) grayscale(20%); )Функции фильтра
Чтобы использовать свойство фильтра CSS, вы указываете значение для одной из следующих функций, перечисленных выше. Если значение недействительно, функция возвращает «нет». Если не указано иное, функции, которые принимают значение, выраженное знаком процента (например, 34%), также принимают значение, выраженное в десятичном формате (например, 0,34).
Вот демонстрация, которая позволяет вам немного поиграть с отдельными фильтрами:
оттенки серого ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Преобразует входное изображение в оттенки серого. Значение «количество» определяет долю конверсии. Значение 100% соответствует полностью оттенкам серого. Значение 0% оставляет вход без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
сепия()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Преобразует исходное изображение в сепию. Значение «количество» определяет долю конверсии. Значение 100% - это полностью сепия. Значение 0 оставляет вход без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
насыщать ()
filter: saturate(2); /* same as… */ filter: sature(200%);Насыщает входное изображение. Значение «количество» определяет долю конверсии. Значение 0% полностью ненасыщено. При значении 100% ввод не изменяется. Другие значения - это линейные множители эффекта. Допускаются значения более 100%, что обеспечивает сверхнасыщенные результаты. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
оттенок-поворот ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Применяет поворот оттенка к входному изображению. Значение «angle» определяет количество градусов вокруг цветового круга, в котором будут корректироваться входные образцы. Значение 0deg оставляет вход без изменений. Если параметр «угол» отсутствует, используется значение 0deg. Максимальное значение - 360deg.
инвертировать ()
filter: invert(100%);Инвертирует образцы во входном изображении. Значение «количество» определяет долю конверсии. Значение 100% полностью инвертируется. Значение 0% оставляет вход без изменений. Значения от 0% до 100% являются линейными множителями эффекта. Если параметр «количество» отсутствует, используется значение 100%. Отрицательные значения не допускаются.
непрозрачность ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Применяет прозрачность к образцам входного изображения. Значение «количество» определяет долю конверсии. Значение 0% полностью прозрачно. При значении 100% ввод не изменяется. Значения от 0% до 100% являются линейными множителями эффекта. Это эквивалентно умножению отсчетов входного изображения на количество. Если параметр «количество» отсутствует, используется значение 100%. Эта функция похожа на более известное свойство непрозрачности; разница в том, что с фильтрами некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности. Отрицательные значения не допускаются.
яркость ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Применяет к входному изображению линейный множитель, делая его более или менее ярким. При значении 0% изображение будет полностью черным. При значении 100% ввод не изменяется. Другие значения - это линейные множители эффекта. Допускаются значения более 100%, что обеспечивает более яркие результаты. Если параметр «количество» отсутствует, используется значение 100%.
контраст ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Регулирует контрастность входа. При значении 0% изображение будет полностью черным. При значении 100% ввод не изменяется. Допускаются значения, превышающие 100%, что дает результаты с меньшим контрастом. Если параметр «количество» отсутствует, используется значение 100%.
размытие ()
filter: blur(5px); filter: blur(1rem);Применяет размытие по Гауссу к входному изображению. Значение «радиуса» определяет значение стандартного отклонения функции Гаусса или количество пикселей на экране, сливающихся друг с другом, поэтому большее значение приведет к большему размытию. Если параметр не указан, используется значение 0. Параметр указывается как длина CSS, но не принимает процентные значения.
тень ()
filter: drop-shadow((2,3) ?)Применяет эффект тени к входному изображению. Тень - это, по сути, размытая, смещенная версия альфа-маски входного изображения, нарисованная определенным цветом и составленная под изображением. Функция принимает параметр типа (определенный в CSS3 Backgrounds), за исключением того, что ключевое слово inset не допускается.
Эта функция похожа на более устоявшееся свойство box-shadow; разница в том, что с фильтрами некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности.
Drop-shadow также естественным образом имитирует контур намеченных объектов, в отличие от того, box-shadowчто в качестве пути рассматривается только прямоугольник.
Как и в случае с text-shadow, здесь нет параметра «spread» для создания сплошной тени больше, чем объект.
url ()
filter: url()url()Функция принимает местоположение файла XML , который определяет SVG фильтр, и может включать в себя якорь на элемент специального фильтра. Вот учебник, который работает как хорошее введение в фильтры SVG с забавной демонстрацией.
Анимация фильтров
Поскольку фильтры можно анимировать, они могут открыть двери для множества развлечений.
Примечания
Вы можете комбинировать любое количество функций для управления рендерингом, но порядок по-прежнему имеет значение (т. Е. Использование grayscale()after sepia()приведет к полностью серому выводу).
Вычисленное значение, отличное от «none», приводит к созданию контекста стека так же, как и непрозрачность CSS. Свойство filter не влияет на геометрию блочной модели целевого элемента, даже если фильтры могут вызывать рисование за пределами рамки элемента. На любые части целевого элемента действуют функции фильтра. Это включает в себя любое содержимое, фон, границы, оформление текста, контур и видимый механизм прокрутки элемента, к которому применяется фильтр, и его потомков. Фильтры также могут применяться к встроенному содержимому, например к отдельным фрагментам текста.
В спецификации также представлена filter(image-URL, filter-functions)функция-оболочка для изображения. Это позволит вам фильтровать любое изображение во время его использования в CSS. Например, вы можете размыть фоновое изображение, не размывая текст. Эта функция фильтра пока не поддерживается в браузерах. А пока вы можете применить к псевдоэлементу и фон, и фильтр, чтобы создать аналогичный эффект.
Проприетарный фильтр IE
Также использовали filterсвойство, например:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )В основном используется для непрозрачности, когда вам нужно поддерживать IE 8 и ниже.
Дополнительная информация
- Спецификация эффектов фильтров W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Галерея фильтров Беннета Фили
- Документы MDN
- Могу ли я использовать
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Понимание эффектов фильтра CSS
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 18 * | 35 год | Нет | 79 | 6 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6.0-6.1 * |