Свойство 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.

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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 для надписи.

<div class="container">
  <img src="https://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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
.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);
}

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

Свойство backdrop-filter

Демо

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

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

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

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

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

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

Автор: Hui Jing Chen

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree