Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Фильтры и композиция/ Backdrop-фильтрация

  1. Продвинутый уровень

    • Свойство `backdrop-filter`

      Применяет filter effect к изображению содержимого позади элемента.

    • Список backdrop filters

      Применяет filter functions или references к backdrop строго по порядку.

    • Прозрачная поверхность

      Обеспечивает видимость отфильтрованного backdrop через прозрачные или полупрозрачные части элемента.

    • Border-box clipping

      Ограничивает отфильтрованный backdrop border box элемента с учётом border radius.

    • Финальная композиция

      Соединяет элемент и отфильтрованный backdrop с родительским изображением через source-over.

    • Stacking context

      Учитывает stacking context, создаваемый ненулевым `backdrop-filter`.

    • Containing block

      Учитывает containing block для absolute- и fixed-positioned descendants.

    • Ошибка filter reference

      Определяет отсутствие backdrop effect при ошибочной SVG filter reference.

  2. Экспертный уровень

    • Backdrop Root

      Находит ближайшую границу, выше которой backdrop sampling не продолжается.

    • Backdrop Root Image

      Формирует flattened screen-space image из ранее нарисованного содержимого внутри Backdrop Root.

    • Backdrop Root triggers

      Определяет Backdrop Root по filter, opacity, masks, clipping, backdrop filtering, blending и `will-change`.

    • Transform mapping

      Согласует screen-space backdrop buffer с локальной геометрией элемента через inverse и forward transforms.

    • Вложенные backdrop effects

      Определяет область выборки для вложенного `backdrop-filter`.

    • Повторное применение

      Предотвращает повторное применение ancestor opacity, filters и masks к sampled backdrop.

    • Границы backdrop buffer

      Вычисляет painting, flattening и clipping bounds отфильтрованного backdrop.

    • Compositor boundary

      Не выводит конкретный GPU/compositor path из наличия `backdrop-filter`.