От автора: свойство backdrop-filter CSS позволяет применять фильтры к контенту позади элемента. Свойство является расширением к спецификации Filter Effects Module Level 1, в которой вводится свойство filter. Новое свойство использует синтаксис filter, но сам эффект применяется к фону элемента.
Подобные эффекты можно встретить в интерфейсах устройств под управлением iOS7 и выше, а также OS X Yosemite и выше. Без свойства подобных эффектов можно добиться только с помощью редактирования фонового изображения и применения техник кадрирования и позиционирования.
Чтобы эффект был виден, необходимо, чтобы 2 элемента были расположены один над другим по оси Z. Эффект работает как на вложенных элементах, так и на элементах с абсолютным позиционированием. Также фон, к которому применяется backdrop-filter, должен быть полупрозрачным. backdrop-filter заставляет движок браузера искать контент за стилизуемым элементом, а не его собственный фон. Затем к найденному контенту применяется фильтр, и в финальном рендере фон компонуется с другими элементами на странице.
Применение свойства backdrop-filter на элемент создает новый контекст стека, как и свойство opacity.
Обратите внимание, что это свойство может негативно сказаться на производительности, особенно когда применяется к большому количеству элементов или к большой области на странице. Используйте это свойство с осторожностью.
Официальный синтаксис
|
1 |
backdrop-filter: none | <filter-function-list> |
По умолчанию: none
Применяется к: всем элементам. В SVG применяется к контейнерам без тега
Анимируется: да
Значения
none — значение по умолчанию. К фону не применяются фильтры.
filter-function-list — набор функций фильтров, разделенных пробелом, применяемых в порядке объявления. Ниже приведен список доступных функций фильтров, который совпадает со свойством filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), url()
Примеры
Ниже показан простой пример, как с помощью backdrop-filter создать эффект замороженного стекла. Разметка – изображение и div для надписи.
|
1 2 3 4 5 6 7 |
<div class="container"> <img src="//ichef.bbci.co.uk/images/ic/976x549_b/p0121stm.jpg"> <div class="caption"> <h3>Morgana</h3> <p>played by Katie McGrath</p> </div> </div> |
Надпись абсолютно спозиционирована поверх нижней части изображения, к ней применено свойство backdrop-filter.
|
1 2 3 4 5 6 7 8 9 |
.caption { padding: 0.5em 1em; position: absolute; left: 0; right: 0; bottom: 0; backdrop-filter: blur(4px); background-color: rgba(255, 255, 255, 0.5); } |
Конечный эффект будет выглядеть следующим образом:
Демо
В настоящее время свойство поддерживается только в Safari 9 и выше. Поэтому просмотреть его можно только в этом браузере. Активировать свойство в Chrome и Opera с помощью флага «Experimental Web Platform Features» не получится.
Ниже показано, как можно менять цвет текста в зависимости от цвета фона (светлый текст на темном фоне и наоборот), применяя фильтр inverse() к тексту и инвертируя фон за фильтром с помощью backdrop-filter.
Следующий пример – переключатель в ночной режим на фильтре inverse().
С помощью фильтра blur() можно создавать переключатели графического контента:
Поддержка в браузерах
Метод применения фильтров (размытие, оттенки серого, оттенок и т.д.) к контенту/элементам под целевым элементом. Статистика с сайта caniuse.com
Автор: Hui Jing Chen
Источник: //tympanus.net/
Редакция: Команда webformyself.
