Пример возможностей эффекта CSS-фильтра в этой статье!
Фильтры изначально были частью спецификации SVG. Однако, когда их полезность стала очевидной, W3C начал работать над добавлением некоторых общих эффектов фильтра в CSS. CSS-фильтры довольно мощные и невероятно простые в использовании. Вы можете использовать их, чтобы размыть, осветлить или насытить изображения среди других вещей. Их можно использовать отдельно или в сочетании с другими фильтрами. Вам необходимо использовать следующий синтаксис для применения фильтров в CSS:
filter: <filter-function> [<filter-function>]* | none Теперь давайте кратко рассмотрим все эти фильтры.
яркость
Этот фильтр контролирует яркость ваших изображений. В качестве параметра он принимает значения, большие или равные нулю. Значение 0% даст вам абсолютно черный вывод. Точно так же значение 100% даст вам исходное изображение. Вы можете указать значения больше 100%, чтобы получить еще более яркие изображения. Например, значение 300% сделает изображение в 3 раза ярче:
img { filter: brightness(300%); }
Вот CodePen с CSS-фильтром яркости в действии:
Контраст
Этот фильтр контролирует контрастность ваших изображений. Как и фильтр яркости, он также принимает значения, большие или равные нулю. Этот фильтр контролирует разницу между темными и светлыми частями изображения в CSS. Следовательно, значение 0% приводит к серому изображению. Установка контрастности на 100% дает исходное изображение и любое другое значение, которое еще больше увеличивает контраст изображения:
img { filter: contrast(0%); }
Вот CodePen с контрастным CSS-фильтром в действии:
Оттенки серого
Как видно из названия, этот фильтр может помочь вам сделать изображения в градациях серого. Этот фильтр постепенно преобразует все цвета в наших изображениях в оттенки серого. Значение 0% не повлияет на наши изображения, а значение 100% превратит их в полутоновые. Отрицательные значения не допускаются.
img { filter: grayscale(100%); }
Вот CodePen с CSS-фильтром в градациях серого в действии:
Насыщение
Этот фильтр контролирует насыщенность цветов в ваших изображениях. Значение 0% полностью удалит все цвета с изображения, а значение более 100% сделает изображение перенасыщенным. На 100%, конечный результат выглядит так же, как оригинальное изображение. Отрицательные значения не допускаются для этого фильтра.
img { filter: saturate(0%); }
Вот CodePen с насыщенным CSS-фильтром в действии:
Сепия
Этот фильтр добавляет оттенки сепии к вашим изображениям, как некоторые старые фотографии. Количество добавленных сепии зависит от процента. При 0% конечный результат выглядит как исходное изображение, а при 100% изображение будет полностью сепийным.
img { filter: sepia(100%); }
Вот CodePen с CSS-фильтром сепии в действии:
Оттенок поворот
Этот фильтр применяет вращение оттенка ко всем цветам на ваших изображениях. Угол поворота цветов зависит от значения указанного параметра. При значении 0deg изображение остается неизменным. Для этого фильтра нет максимального значения. Однако эффект значений выше 360deg оборачивается. Это означает, что значения 90deg и 450deg будут иметь одинаковый эффект.
img { filter: hue-rotate(90deg); }
Вот CodePen с CSS-фильтром hue-rotate в действии:
инвертировать
Этот фильтр инвертирует все цвета в ваших изображениях. Степень инверсии зависит от значения переданного параметра. Значение 0% не повлияет на исходное изображение, но значение 100% полностью изменит его.
img { filter: invert(100%); }
Вот CodePen с инвертированным CSS-фильтром в действии:
пятно
Этот фильтр применяет размытие по Гауссу к изображениям. Это размазывает цвета вместе и распространяет их за пределы их краев. Параметр radius, который вы передаете этому фильтру, определяет, сколько пикселей на экране смешиваются друг с другом. Большие значения обеспечат большее размытие. Этот фильтр может принимать любые значения длины, кроме процентов.
img { filter: blur(1px); }
Вот CodePen с CSS-фильтром размытия в действии:
помутнение
Этот фильтр сделает ваши изображения полупрозрачными. Изображения будут полностью непрозрачными при 100% и полностью прозрачными при 0%. Этот фильтр похож на известное свойство непрозрачности. Одно из различий между этими двумя заключается в производительности. Свойство фильтра в некоторых браузерах ускоряется аппаратно, что может привести к повышению производительности.
img { filter: opacity(75%); }
Вот CodePen с CSS-фильтром непрозрачности в действии:
Drop Shadow
Как следует из названия, этот фильтр добавляет эффект тени к изображениям. В основном это размытая, смещенная версия альфа-маски входного изображения, нарисованная конкретным цветом, который вы предоставляете. Для этого свойства требуется смещение по оси x и y, а также цвет тени. Вы также можете дополнительно указать значение радиуса размытия, которое будет определять, будет ли тень резкой или размытой.
img { filter: drop-shadow(5px 5px 10px #666); }
Вот CodePen с CSS-фильтром в тени:
Веб-сайт ()
Хотя все фильтры, которые мы обсуждали до этого момента, довольно полезны, они являются фильтрами общего назначения. Ваш проект может потребовать чего-то более конкретного. Если ни один из приведенных выше фильтров не соответствует вашим требованиям, вы можете создать свой собственный фильтр SVG и использовать его id для ссылки на него с помощью фильтра url() .
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="greenish"> <feComponentTransfer> <feFuncR type="linear" slope="2" intercept="-0.5"/> <feFuncG type="linear" slope="2" intercept="-0."/> <feFuncB type="linear" slope="2" intercept="-0.25"/> </feComponentTransfer> </filter> <filter id="bluish"> <feComponentTransfer> <feFuncR type="linear" slope="2" intercept="-0.5"/> <feFuncG type="linear" slope="2" intercept="-0.1"/> <feFuncB type="linear" slope="2" intercept="0"/> </feComponentTransfer> </filter> </svg> <style type="text/css"> img { filter: url('#greenish'); } </style>
Вот CodePen с CSS-фильтром url() в действии:
Объединение и анимация фильтров
Вы также можете объединить несколько фильтров вместе, чтобы получить различные эффекты. В большинстве случаев порядок фильтров не имеет большого значения, однако фильтры применяются в том порядке, в котором они размещены в вашем CSS, и некоторые фильтры переопределяют другие. Например, использование фильтра sepia после фильтра в grayscale приведет к получению изображения в grayscale но использование grayscale после того, как в режиме sepia будет получено изображение в оттенках серого.
Фильтры также могут быть анимированными. Если вы правильно их анимируете, вы можете создать очень интересные эффекты. Возьмем следующий фрагмент кода в качестве примера:
img { animation: haunted 3s infinite; } @keyframes haunted { 0% { filter: brightness(20%); } 48% { filter: brightness(20%); } 50% { filter: sepia(1) contrast(2) brightness(200%); } .... 96% { filter: brightness(400%); } }
В приведенном выше коде несколько фильтров с разными значениями применяются во время анимации. Окончательный результат можно увидеть в демоверсии ниже:
Внезапное изменение яркости и контрастности с полной сепией на 50% создает впечатляющий эффект. Лучший способ лучше понять концепцию — попытаться поэкспериментировать с собственными фильтрами анимации!
Дополнительные замечания
Даже если фильтр вызывает рисование вне блочной модели элемента, он не повлияет на геометрию блочной модели этого элемента. Помните, что фильтры влияют на все части целевых элементов, включая фон, границы и оформление текста. Вы также можете применять фильтры для видео и фреймов. Следующая демонстрация иллюстрирует эту концепцию. Дополнительные примеры доступны на веб-сайте Беннетта Фили .
Все эти фильтры работают довольно хорошо с точки зрения производительности, за исключением фильтра blur который может быть медленным, если ваш браузер не использует для этого аппаратное ускорение. Производительность фильтра url() зависит от фильтра SVG, который вы решили применить.
Свойство filter поддерживается всеми основными браузерами. Для работы Chrome и Opera требуется префиксная версия этого свойства. IE не поддерживает фильтры, но Edge поддерживает их частично. В этом случае частичный означает, что он поддерживает все фильтры, кроме версии url() .
Вывод
В этом руководстве рассматриваются многие возможности CSS-фильтров, доступные разработчикам прямо сейчас. Они имеют хорошую поддержку браузера, просты в использовании и имеют лучшую производительность по сравнению с решениями на основе холста. Более того, как я уже упоминал в предыдущем разделе, вы можете использовать их как в видео, так и с другими элементами.
Вы использовали какие-либо фильтры нетрадиционными способами? Мы хотели бы видеть это! Оставьте нам записку ниже вместе с любыми вопросами, которые у вас могут возникнуть.