Фильтры CSS
Фильтры (такие, как blur CSS) – это мощный инструмент, который можно использовать для создания различных визуальных эффектов. Свойство CSS filter позволяет применять к элементу такие эффекты, как размытие или смещение цветов. Фильтры обычно используются для настройки выводимого изображения, фона или рамки.
Синтаксис:
.filter-me {
filter: <filter-function> [<filter-function>]* | none
}В свойстве может быть использована одна или несколько функций:
- blur();
- brightness();
- contrast();
- drop-shadow();
- grayscale();
- hue-rotate();
- invert();
- opacity();
- saturate();
- sepia();
- url() – для применения SVG-фильтров;
- custom() – будет реализована в ближайшее время.
Для применения в свойстве одновременно нескольких функций их названия нужно разделять пробелом.
Пример применения CSS filter blur:
.blur-me {
filter: blur(20px);
}Пример применения нескольких фильтров:
.do-more-things {
filter: blur(20px) grayscale(20%);
}Функции фильтров
Чтобы использовать свойство, необходимо указать значение для одной из функций, перечисленных выше. Если значение является недействительным, то функция возвращает “none“. За исключением отдельных случаев, функции, которые принимают значение в процентах (например, 34%), также принимают численные значения, заданные десятичной дробью.
Ниже мы применим множество различных функций фильтров к изображению (в том числе и для создания CSS blur effect):
grayscale()
filter: grayscale([ <число> | <процент> ])Преобразует входящее изображение в оттенки серого. Значение 100% – полностью в оттенках серого, 0% – оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение по умолчанию – 100%. Отрицательные значения не допускаются.
sepia()
filter: sepia([ <число> | <процент> ])Преобразует входящее изображение в сепию. Значение 100% – полное применение сепии. Значение 0 оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение по умолчанию – 100%. Отрицательные значения не допускаются.
saturate()
filter: saturate([ <число> | <процент> ])Увеличивает насыщенность цветов входящего изображения. Значение 0% полностью обесцвечивает изображение. Значение 100% оставляет исходное изображение без изменений. Другие значения являются линейными коэффициентами применения эффекта. Допускаются значения больше 100%, это приводит к перенасыщению цветов. Если параметр отсутствует, используется значение по умолчанию -100%. Отрицательные значения не допускаются (как и в blur image CSS).
hue-rotate()
filter: hue-rotate(<угол>)Применяет к входящему изображению смещение цветовых тонов. Значение “angle” определяет количество градусов по круговой диаграмме цветов, на которое будут скорректированы цвета исходного изображения. Значение 0 градусов оставляет исходное изображение без изменений. Если параметр “angle” не задан, используется значение 0. Максимальное значение 360 градусов.
invert()
filter: invert([ <число> | <процент> ])Инвертирует цвета исходного изображения. Значение 100% полностью инвертирует цвета, 0% -оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Если параметр не задан, используется значение – 100%. Отрицательные значения не допускаются.
opacity()
filter: opacity([ <число> | <процент> ])Задает непрозрачность входящего изображения. Значение 0% задает полную прозрачность изображения,100% – оставляет исходное изображение без изменений. Значения от 0% до 100% являются линейными коэффициентами применения эффекта. Это эквивалентно умножению образцов цветов исходного изображения на заданное значение. Если параметр отсутствует, используется значение 100%.
Эта функция аналогична более традиционному свойству opacity. Разница заключается в том, что некоторые браузеры применяют для фильтров аппаратное ускорение. Отрицательные значения не допускаются (как и в blur image CSS).
brightness()
filter: brightness([ <число> | <процент> ])Изменяет яркость изображения. Значение 0% создает полностью черное изображение. Значение 100% оставляет исходное изображение изменений. Допускаются значения больше 100%, которые дают на выходе еще более яркое изображение. Если параметр не задан, используется значение 100%.
contrast()
filter: contrast([ <число> | <процент> ])Задает контрастность входящего изображения. Значение 0% создает полностью черное изображение, 100% – оставляет исходное изображение без изменений. Допускаются значения больше 100%, которые на выходе дают меньше контрастности. Если параметр не задан, используется значение 100%.
blur()
filter: blur(<длина>)Фильтр создает эффект blur CSS, применяя к входящему изображению размытие по Гауссу. Значение ”radius” определяет значение стандартного отклонения функции Гаусса, или то, сколько пикселей на экране смешиваются друг с другом. Большее значение на выходе дает большее размытие. Если параметр не установлен, то используется значение 0. Параметр задается как длина CSS, но не принимает процентных значений.
drop-shadow()
filter: drop-shadow(<длина>{2,3} <цвет>?)Применяет к входящему изображению эффект тени. Фильтр создает размытую, смещенную версию входящего изображения с альфа-маской определенного цвета, которая выводится под изображением. Функция принимает параметр type (определен в CSS3 Backgrounds). Ключевого слова “inset” не допускается.
Эта функция аналогична более традиционному свойству box-shadow. Разница заключается в том, что некоторые браузеры применяют для фильтров аппаратное ускорение.
Кроме этого drop-shadow полностью повторяет очертания объекта, отбрасывающего тень. В отличие от свойства box-shadow, которое повторяет только контур панели.
Так же, как text-shadow, функция не поддерживает параметр “spread” для создания тени больше объекта.
url()
filter: url(<url-адрес>)Функция url() принимает место размещения файла XML, который определяет SVG-фильтр (в том числе и для CSS filter blur), и может включать в себя анкор для конкретного элемента фильтра.
Анимация фильтров
Поскольку фильтры могут быть анимированы, это дает нам возможность разнообразить дизайн ресурса.
Примечания
Вы можете объединять любое количество функций для управления отображением, но их порядок при этом имеет значение. Например, использовав grayscale() после sepia(), и дополнительно обработав blur CSS. На выходе вы получите полностью серое изображение.
Передаваемое значение (кроме “none”) определяет, как контекст укладывается в стек, таким же образом, как работает непрозрачность CSS. Свойство filter не оказывает никакого влияния на геометрию поля целевого элемента, хотя фильтры могут задавать вывод различных эффектов за пределами границ поля элемента. Фильтры применяются ко всем частям целевого элемента. В том числе: к контенту, фону, рамкам, оформлению текста, контуру и видимому механизму прокрутки.
В спецификации также определена функция filter (image-URL, filter-functions), оборачивающая функцию для изображений. Она позволяет применять фильтры к изображениям, которые используются в CSS. Например, можно размыть фоновое изображение, не применяя CSS blur background (размытие) к самому тексту. Эта функция еще не поддерживается в браузерах. Но чтобы создать такой эффект, можно применить фон и фильтр к псевдо-элементу.
Фильтры для IE
Свойство filter также используется следующим образом:
.half-opacity {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}В основном используется для непрозрачности, когда необходимо добавить поддержку в IE 8 и ниже.
Перевод статьи «filter» был подготовлен командой проекта Сайтостроение от А до Я.
