Máscaras permite ocultar algumas partes de um elemento e mostrar outras partes.

Eles são especialmente úteis para dar molduras ou formas personalizadas para imagens carregadas dinamicamente, como avatares de usuários ou mídia de postagem, onde você não tem a possibilidade de editar essas imagens. Também é muito útil dar uma aparência personalizada às suas próprias imagens, sem ter que editar as próprias imagens originais.

Você encontrará a configuração de máscara na seção Aparência de vários building blocks: container, image, text, progress bar e rectangle.

Máscara de Área

Disponível apenas para contêineres, este tipo de máscara irá ocultar todas as partes de todos os descendentes do contêiner que ultrapassam os limites do próprio contêiner.

Máscara de área: desligada

 

Máscara de área: ligada

 

Máscara de Gradiente

Este tipo de máscara usa um gradiente como camada de máscara.

Diferente dos gradientes de fundo, o controle de gradiente de máscara não permite alterar as cores, mas apenas a opacidade de cada etapa do gradiente. Isso porque as cores não farão nenhuma diferença: o importante é sempre a opacidade.

Máscara de gradiente aplicada a um elemento de imagem

 

Máscara de imagem

Este tipo de máscara usa uma imagem como camada de máscara. Mais especificamente: ele usa o canal alfa da imagem.

A imagem da máscara funcionará desde que tenha áreas transparentes. Os pixels opacos da imagem se tornarão as partes visíveis do seu elemento e os pixels transparentes serão ocultados.

Você pode configurar as mesmas coisas em relação à imagem da máscara e às imagens de fundo: modo de cobertura, lado a lado e posição.

Máscara de imagem aplicada a um elemento de imagem