Свойство backdrop-filter

Свойство backdrop-filter

От автора: свойство backdrop-filter CSS позволяет применять фильтры к контенту позади элемента. Свойство является расширением к спецификации Filter Effects Module Level 1, в которой вводится свойство filter. Новое свойство использует синтаксис filter, но сам эффект применяется к фону элемента.

Подобные эффекты можно встретить в интерфейсах устройств под управлением iOS7 и выше, а также OS X Yosemite и выше. Без свойства подобных эффектов можно добиться только с помощью редактирования фонового изображения и применения техник кадрирования и позиционирования.

Чтобы эффект был виден, необходимо, чтобы 2 элемента были расположены один над другим по оси Z. Эффект работает как на вложенных элементах, так и на элементах с абсолютным позиционированием. Также фон, к которому применяется backdrop-filter, должен быть полупрозрачным. backdrop-filter заставляет движок браузера искать контент за стилизуемым элементом, а не его собственный фон. Затем к найденному контенту применяется фильтр, и в финальном рендере фон компонуется с другими элементами на странице.

Применение свойства backdrop-filter на элемент создает новый контекст стека, как и свойство opacity.

Обратите внимание, что это свойство может негативно сказаться на производительности, особенно когда применяется к большому количеству элементов или к большой области на странице. Используйте это свойство с осторожностью.

Официальный синтаксис

По умолчанию: none

Применяется к: всем элементам. В SVG применяется к контейнерам без тега и всем графическим элементам

Анимируется: да

Значения

none — значение по умолчанию. К фону не применяются фильтры.

filter-function-list — набор функций фильтров, разделенных пробелом, применяемых в порядке объявления. Ниже приведен список доступных функций фильтров, который совпадает со свойством filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), url()

Примеры

Ниже показан простой пример, как с помощью backdrop-filter создать эффект замороженного стекла. Разметка – изображение и div для надписи.

Надпись абсолютно спозиционирована поверх нижней части изображения, к ней применено свойство backdrop-filter.

Конечный эффект будет выглядеть следующим образом:

Свойство backdrop-filter

Демо

В настоящее время свойство поддерживается только в Safari 9 и выше. Поэтому просмотреть его можно только в этом браузере. Активировать свойство в Chrome и Opera с помощью флага «Experimental Web Platform Features» не получится.

Ниже показано, как можно менять цвет текста в зависимости от цвета фона (светлый текст на темном фоне и наоборот), применяя фильтр inverse() к тексту и инвертируя фон за фильтром с помощью backdrop-filter.

Следующий пример – переключатель в ночной режим на фильтре inverse().

С помощью фильтра blur() можно создавать переключатели графического контента:

Поддержка в браузерах

Метод применения фильтров (размытие, оттенки серого, оттенок и т.д.) к контенту/элементам под целевым элементом. Статистика с сайта caniuse.com

Автор: Hui Jing Chen

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: