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

Дерево навыков/Маски и обрезка/ Слои и композиция масок

КатегорияЦвет, фоны и декоративные эффектыНавыкМаски и обрезкаКомпонент навыка

Слои и композиция масок

БазовыйЭкспертный

Основано на спецификациях:
  1. Базовый уровень

    • Источник маски

      Назначает изображение или SVG-источник слою маски.

    • Позиция и размер

      Управляет положением и размером изображения маски.

    • Повторение маски

      Настраивает повторение изображения маски по осям.

    • Alpha и luminance

      Различает маскирование по alpha-каналу и яркости источника.

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

    • Origin и clip boxes

      Раздельно определяет область позиционирования и область рисования слоя маски.

    • Режим источника

      Определяет alpha- или luminance-поведение `match-source` по типу источника.

    • Списки слоёв

      Сопоставляет повторяющиеся и лишние значения списков с количеством `mask-image`.

    • Transparent black

      Определяет прозрачный результат для незакрытых областей, пустых и недоступных источников.

    • Групповая маска

      Применяет маску к результату рисования элемента и его содержимого как к единой группе.

    • Граница взаимодействия

      Учитывает, что маскирование не изменяет layout, геометрию бокса и hit testing.

    • Stacking context

      Учитывает создание stacking context ненулевым источником маски.

    • Операции композиции

      Выбирает `add`, `subtract`, `intersect` или `exclude` для пары слоёв маски.

    • Сброс shorthand

      Учитывает списочную запись `mask` и сброс всех `mask-border-*`.

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

    • Luminance conversion

      Восстанавливает нормативное преобразование RGB luminance и исходного alpha в alpha маски.

    • Порядок композиции

      Восстанавливает композицию снизу вверх с текущим слоем как source и нижними слоями как destination.

    • Изоляция композиции

      Ограничивает `mask-composite` изолированной группой слоёв маски без композиции с содержимым и backdrop.