О масках

Маска скрывает часть главного элемента, а именно преобразует его с помощью выбранной формы или определенного уровня прозрачности. Главные элементы могут быть изображениями, элементами div, текстовыми блоками и компонентами.

Каждый элемент может иметь только одну маску, но вы можете наложить маски друг на друга, если упакуете главный элемент в блок div и примените маску уже к нему. Вы также можете добавлять маски к дочерним элементам, если вложите их в главный.

Типы масок

Маска изображения
Маска градиента
Маска clip-path

Совместимость с браузерами

В Microsoft Edge 40 и более ранних версиях поддерживаются только прямоугольные маски clip-path. Другие типы и формы масок будут игнорироваться.

Маска изображения

Маска изображения использует прозрачные области изображения, чтобы скрывать главный элемент.

Чтобы добавить маску изображения:

Нажмите правой кнопкой мыши на элемент, для которого необходимо добавить маску.
В контекстном меню выберите Добавить маску изображения…
Импортируйте или выберите изображение, которое нужно использовать как маску.

Вы можете настроить размер и положение маски с помощью инструмента выделения или панели "Свойства".

Примечание. В масках изображений нельзя использовать положение в процентах.

Маска градиента

Маски градиента скрывают главный элемент в соответствии с градиентом уровней прозрачности.

В Google Web Designer для масок доступны оба типа градиентов:

линейный градиент;
радиальный градиент.

Чтобы добавить маску градиента:

Нажмите правой кнопкой мыши на элемент, для которого необходимо добавить маску.
В контекстном меню выберите Добавить маску градиента.
Нажмите на образец градиента на панели "Свойства", чтобы настроить его тип, цвета, прозрачность и угол (только для линейных градиентов).

По умолчанию размер маски градиента совпадает с размером главного элемента, но вы можете настроить положение и размер маски с помощью инструмента выделения или панели "Свойства".

Примечание. В масках градиента нельзя использовать положение в процентах.

Маски сlip-path

Маски clip-path обрезают главный элемент по форме геометрической фигуры.

Чтобы выбрать форму маски, нажмите и удерживайте инструмент маски clip-path на панели инструментов, пока не появится контекстное меню:

Прямоугольная маска (по умолчанию)
Овальная маска
Многоугольная маска

Совместимость с браузерами

Internet Explorer и Microsoft Edge поддерживают только прямоугольные маски clip-path, размер и положение которых указаны в пикселях. Маски на основе процентных значений и с другими формами (например, прямоугольные маски со скругленными углами) игнорируются.
В Firefox и Safari прямоугольные маски со скругленными углами могут отображаться некорректно, если для радиуса скругления выбрано большое значение относительно размеров самой маски.
Safari не поддерживает наложение масок clip-path на фигуры, нарисованные с помощью инструмента "Прямоугольник". Чтобы обойти это ограничение, используйте вместо прямоугольника элемент div и поместите маску на него.
В Chrome и Opera маски clip-path отображаются неправильно, если главный элемент содержит дочерний элемент с трехмерным преобразованием.
Прямоугольные маски со скругленными углами, радиус которых задан на основе процентных значений, могут отображаться в разных браузерах с небольшими отличиями.

Чтобы добавить маску clip-path:

Выберите элемент, для которого необходимо добавить маску.
Выберите инструмент маски нужной формы.
Задайте дополнительные параметры для маски выбранной формы.
- Только для прямоугольных масок. Задайте радиус скругленных углов на панели настроек инструмента в верхней части страницы. Чтобы установить один и тот же радиус для всех четырех углов, нажмите кнопку, позволяющую выбрать одинаковые значения .
- Только для многоугольных масок. Выберите нужную форму на панели настроек инструмента в верхней части страницы. Чтобы самостоятельно нарисовать нужную вам фигуру, выберите пункт Свободная форма. Если вы выберете пункт Правильный многоугольник, укажите число его сторон.
Нарисуйте маску на главном элементе.
- Чтобы у маски сохранялись одинаковые высота и ширина, при рисовании удерживайте клавишу Shift. Такое использование клавиши Shift не поддерживается для масок свободной формы и определенных фигур, у которых все стороны должны быть одинаковыми: треугольника, ромба, пятиугольника, шестиугольника и звезды.
- Чтобы использовать в качестве центральной точки маски точку, из которой вы начали рисовать, нажмите и удерживайте клавишу Alt.

Примечание. Нарисовав многоугольную маску, вы сможете изменить ее форму, перетащив вершины в нужные места, но не сможете изменить количество сторон.

Формы многоугольных масок

	Свободная форма (можно нарисовать фигуру произвольной формы)
	Правильный многоугольник (можно задать количество сторон одинаковой длины)
	Треугольник
	Прямоугольник
	Рамка
	Ромб
	Пятиугольник
	Шестиугольник
	Правая угловая скобка
	Левая угловая скобка
	Крест
	Звезда
	Стрелка вправо
	Стрелка влево

Выбор масок

В рабочей области выберите главный элемент и нажмите на маску. Вокруг нее появится зеленый контур.
В расширенном режиме временной шкалы выберите слой маски под слоем главного элемента. Маски обозначаются символом перед названием слоя.

Вы можете скрывать и блокировать слои маски в расширенном режиме временной шкалы, чтобы работать с главными элементами было проще.

Выбор нескольких масок

Чтобы выбрать и удалить несколько слоев масок в расширенном режиме временной шкалы, нажимайте на них, удерживая клавишу Ctrl. Нельзя изменять одновременно несколько масок.

Удалить выбранные элементы и маски можно, только если выделены главные элементы, в которых содержатся эти маски.

Изменение масок

Вы можете изменять маски в рабочей области или с помощью панели "Свойства". Свойства CSS для масок недоступны на панели CSS.

Для масок доступны следующие изменения:

Вырезание, копирование и вставка маски
Перемещение маски
Изменение размера маски
Поворот маски
Изменение источника маски изображения
Изменение градиента маски
Изменение кривизны углов прямоугольной маски
Изменение формы многоугольной маски

Вырезание, копирование и вставка маски

Вы можете вырезать или скопировать маску, а затем вставить ее в другой элемент или документ любым из указанных ниже способов.

В рабочей области или в расширенном режиме временной шкалы:
- Нажмите правой кнопкой мыши на маску и выберите Вырезать или Копировать.
- Нажмите правой кнопкой мыши на элемент, для которого нужно добавить маску, и выберите Вставить или Заменить маску.
В расширенном режиме временной шкалы:
- Перетащите слой маски на слой элемента, чтобы перенести маску на другой главный элемент (заменить маску таким способом невозможно).
- Чтобы скопировать маску на другой элемент, при перетаскивании удерживайте клавишу Alt (заменить маску таким способом невозможно).
Быстрые клавиши:
- Чтобы вырезать маску, нажмите Ctrl + X (Windows) или ⌘ + X (Mac).
- Чтобы скопировать маску, нажмите Ctrl + C (Windows) или ⌘ + C (Mac).
- Чтобы вставить маску, нажмите Ctrl + V (Windows) или ⌘ + V (Mac).
Команды меню:
- Правка > Вырезать
- Правка > Копировать
- Правка > Вставить или Заменить маску

Также будет вставлена любая анимация маски.

Ограничения копирования и вставки масок

Можно вырезать или скопировать только одну маску, а также вставить ее только в один элемент.
Если вставить маску в элемент, в котором уже есть другая, новая маска заменит существующую.
Маски нельзя вырезать, копировать и вставлять в правилах обработки мультимедиа.

Перемещение маски

Выберите маску, которую необходимо переместить, затем выполните одно из следующих действий:

Измените координаты верхнего левого угла маски на панели Свойства. Эти значения указываются относительно левого верхнего угла главного элемента.
Используйте клавиши со стрелками, чтобы перемещать маску с шагом в один пиксель. Чтобы увеличить шаг до 10 пикселей, удерживайте клавишу Shift.
Используйте инструмент выделения , чтобы перетаскивать маску с помощью мыши. Чтобы перемещать маску только по одной оси, при перетаскивании удерживайте клавишу Shift.

Маски можно располагать за пределами границ их главного элемента.

Примечание. В масках изображений и градиентов нельзя использовать положение в процентах.

Изменение размера маски

Выберите маску, которую нужно изменить, а затем:

Измените ширину и высоту на панели Свойства.
Используйте инструмент выделения , установив флажок Управлять трансформацией на панели настроек инструмента вверху.
- Чтобы сохранить соотношение сторон, при перетаскивании удерживайте клавишу Shift.
- Чтобы изменить размер маски, не меняя ее центральную точку, при перетаскивании удерживайте клавишу Alt (Windows) или Option (macOS).

Поворот маски

Маски нельзя поворачивать напрямую, но можно достичь того же эффекта, выполнив следующие шаги перед добавлением маски:

Упакуйте элемент, для которого необходимо добавить маску.
Добавьте маску в блок div.
Поверните блок div. Маска повернется вместе с ним.
Поверните оригинальный элемент в противоположном направлении.

Изменение источника маски изображения

Чтобы заменить изображение, используемое для маски:

Выберите маску.
На панели Свойства нажмите кнопку Настройка маски изображения в поле Источник.
Выберите изображение из библиотеки или нажмите кнопку Импорт объектов , чтобы использовать другое изображение.
Нажмите OK.

Изменение градиента маски

Чтобы настроить градиент, используемый для маски, выполните следующие действия:

Выберите маску.
На панели Свойства нажмите на образец градиента.
Измените градиент.
- Тип градиента. Нажмите кнопку Линейный градиент или Радиальный градиент .
- Расстояние перехода. Перетащите маркер прозрачности вдоль верхней части панели градиента, чтобы изменить значение.
- Прозрачность. Маркеры прозрачности устанавливают уровень прозрачности в определенной точке градиента. При 100 % главный элемент полностью виден, а при 0 % – полностью скрыт. Нажмите на маркер, чтобы изменить его уровень прозрачности в процентном поле справа.
- Дополнительные маркеры прозрачности. Чтобы добавить больше маркеров прозрачности, нажмите на панель градиента. Чтобы удалить маркер, перетащите его вниз.
- Угол. Можно настраивать угол линейных градиентов.
- Значение по умолчанию. Нажмите кнопку Градиент по умолчанию , чтобы установить настройки градиента по умолчанию (линейный градиент от 0 до 100 % при 90 градусах).

Изменение кривизны углов прямоугольной маски

Углы прямоугольной маски можно оставить прямыми или скруглить. В последнем случае вы можете выбрать нужный радиус кривизны.

Выберите маску.
На панели Свойства укажите радиус угла в пикселях или процентах. Значение радиуса "0" соответствует прямому углу.
Когда активна кнопка, позволяющая выбрать одинаковые значения , для всех четырех углов указана одинаковая величина. Чтобы настроить каждый угол по отдельности, деактивируйте кнопку .

Изменение формы многоугольной маски

Чтобы изменить форму многоугольной маски в рабочей области:

Выберите маску.
Выберите инструмент Многоугольная маска на панели инструментов. На каждой вершине появятся маркеры.
Перетащите каждую вершину в нужное место.
- Чтобы переместить вершину только по одной оси (по горизонтали или вертикали), при перетаскивании удерживайте клавишу Shift.

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

Анимация масок

Вы можете анимировать размер и положение маски, а также с помощью видимых диапазонов управлять ее появлением и исчезновением. Анимация маски не зависит от анимации главного элемента.

В случае с прямоугольными масками можно анимировать скругленные углы. Для многоугольных масок clip-path также можно анимировать форму маски (но не количество сторон), переместив вершины в ключевом кадре.

Маски нельзя изменять в нескольких кадрах. Чтобы изменить анимацию маски, выберите один ключевой кадр.

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

Совместимость с браузерами

Если ваш документ содержит элементы <canvas>, например для галереи переходов, эффектов изображений или частиц, анимация масок clip-path не будет воспроизводиться в Safari.

Маски в адаптивных макетах

Правила обработки мультимедиа позволяют переопределять свойства маски и анимацию для определенных размеров области просмотра. Вы также можете переопределить источник, чтобы использовать другое изображение для масок изображений, и изменить градиент для масок градиента.

Примечание. Если вы удаляете переопределение для положения или размера, автоматически сбрасываются оба свойства положения (верхнее и левое) или оба свойства размера (ширина и высота). Для масок clip-path сбрасываются все свойства положения и размера.

Эта информация оказалась полезной?

Как можно улучшить эту статью?