Sobre máscaras

Com uma máscara, é possível ocultar parte de um elemento com base em uma forma ou níveis de transparência. Esses elementos podem ser imagens, divs, contêineres de texto e componentes.

Cada elemento só pode ter uma máscara. No entanto, é possível acrescentar às máscaras camadas que unem o elemento original a um div, bem como aplicar uma máscara ao div do contêiner. Você também pode aninhar outro elemento no elemento original e adicionar uma máscara ao elemento filho.

Tipos de máscara

Máscara de imagens
Máscara de gradiente
Máscara de trajetória de corte

Compatibilidade do navegador

As versões 40 e anteriores do Microsoft Edge só são compatíveis com máscaras de trajetória de corte retangulares. Outros tipos e formas de máscara são ignorados.

Máscara de imagens

Esse tipo de máscara usa as regiões transparentes de uma imagem para ocultar o elemento original.

Para adicionar uma máscara de imagens:

Clique com o botão direito do mouse no elemento que você quer mascarar.
Selecione Adicionar máscara de imagens… no menu pop-up.
Importe ou selecione a imagem que você quer usar como máscara.

É possível ajustar o tamanho e a posição da máscara com a ferramenta Seleção ou no painel de propriedades.

Observação: as máscaras de imagens não podem usar o posicionamento com base em porcentagem.

Máscara de gradiente

As máscaras de gradiente ocultam o elemento original de acordo com níveis de gradientes de transparência.

O Google Web Designer é compatível com dois tipos de gradientes para máscaras:

Gradiente linear
Gradiente radial

Para adicionar uma máscara de gradiente:

Clique com o botão direito do mouse no elemento que você quer mascarar.
Selecione Adicionar máscara de gradiente no menu pop-up.
Clique na amostra de gradiente no painel de propriedades para personalizar o tipo, as cores, a opacidade e o ângulo do gradiente (somente para gradientes lineares).

Por padrão, a máscara de gradiente é do mesmo tamanho do elemento original. No entanto, é possível ajustar as propriedades de posição e tamanho da máscara com a ferramenta Seleção ou no painel de propriedades.

Observação: as máscaras de gradiente não podem usar o posicionamento com base em porcentagem.

Máscaras de trajetória de corte

As máscaras de trajetória de corte usam uma forma geométrica para determinar as partes do elemento original que serão exibidas.

Selecione o tipo da forma da máscara clicando e mantendo pressionada a ferramenta Máscara de trajetória de corte na barra de ferramentas até um menu pop-up ser exibido:

Máscara de retângulo (padrão)
Máscara oval
Máscara poligonal

Compatibilidade do navegador

O Internet Explorer e o Microsoft Edge só aceitam máscaras de trajetória de corte em formas de retângulo com a posição e o tamanho especificados em pixels. As máscaras baseadas em porcentagem, além de outras formas, como cantos arredondados para máscaras retangulares, serão ignoradas.
Talvez o Firefox e o Safari não renderizem corretamente máscaras retangulares com cantos arredondados para valores de raio de canto grandes, em comparação com as dimensões da máscara.
O Safari não é compatível com máscaras de trajetória de corte em formas desenhadas com a ferramenta Retângulo. Como solução alternativa, use um elemento div em vez de uma forma de retângulo e coloque a máscara nesse elemento div.
No Chrome e no Opera, as máscaras de trajetória de corte são renderizadas incorretamente quando o elemento original contém um elemento filho com transformação 3D.
As máscaras retangulares com cantos arredondados definidos usando um raio baseado em porcentagem podem ser renderizadas de maneiras um pouco diferentes em navegadores diferentes.

Para adicionar uma máscara de trajetória de corte, faça o seguinte:

Selecione o elemento que você quer mascarar.
Selecione a ferramenta de máscara para a forma desejada.
Defina opções adicionais para a forma da máscara.
- Somente para máscaras retangulares: para cantos arredondados, defina o raio do canto na barra de opções na parte superior da ferramenta. Utilize o botão Manter idêntico para usar o mesmo raio em todos os quatro cantos.
- Somente para máscaras poligonais: selecione a forma que você quer na barra de opções na parte superior da ferramenta. Use a opção Formato livre para desenhar sua própria forma. Se você selecionar a opção Polígono regular, insira o número de lados desejado.
Desenhe a máscara sobre o elemento original.
- Segure a tecla Shift ao desenhar para restringir a máscara e para que ela tenha largura e altura iguais. A tecla Shift não afeta as máscaras de formato livre ou determinadas formas predefinidas que, em vez disso, serão desenhadas com lados iguais: triângulo, losango, hexágono e estrela.
- Segure a tecla Alt para usar a posição inicial de desenho como o ponto central da máscara.

Observação: depois de desenhar uma máscara poligonal, será possível arrastar cada vértice para alterar a forma dela, mas não será possível mudar o número de lados.

Formas de máscara poligonal

	Formato livre (desenhe sua própria forma)
	Polígono regular (defina o número de lados, e eles serão desenhados com o mesmo comprimento)
	Triângulo
	Retângulo
	Frame
	Losango
	Pentágono
	Hexágono
	Botão de divisa direito
	Botão de divisa esquerdo
	Cruz
	Estrela
	Seta à direita
	Seta à esquerda

Selecionar máscaras

No cenário: selecione o elemento original e clique na máscara. A máscara será destacada em verde.
Na linha do tempo do Modo avançado: selecione a camada da máscara abaixo da camada do elemento original. As camadas da máscara são indicadas pelo símbolo ao lado do nome da camada.

É possível ocultar e bloquear as camadas da máscara na linha do tempo do Modo avançado para facilitar o trabalho com os elementos originais.

Selecionar várias máscaras

Use Ctrl+clique para selecionar várias camadas da máscara na linha do tempo do Modo avançado e excluí-las de uma só vez. Não é possível editar mais de uma máscara por vez.

Não é possível excluir uma seleção mista de elementos e máscaras, a menos que os elementos originais das máscaras também estejam selecionados.

Editar máscaras

É possível editar máscaras diretamente no cenário ou usando o painel de propriedades. As propriedades CSS das máscaras não estão disponíveis no painel CSS.

As máscaras podem ser editadas das seguintes maneiras:

Recortar, copiar e colar uma máscara
Mover uma máscara
Redimensionar uma máscara
Girar uma máscara
Alterar a origem de uma máscara de imagens
Mudar o gradiente de uma máscara de gradiente
Mudar a curvatura dos cantos de uma máscara de retângulo
Mudar a forma de uma máscara poligonal

Recortar, copiar e colar uma máscara

Recorte ou copie e cole uma máscara em outro elemento, mesmo em documentos diferentes, usando qualquer um dos seguintes métodos:

No cenário ou na linha do tempo do Modo avançado:
- Clique com o botão direito do mouse na máscara e selecione Recortar ou Copiar.
- Clique com o botão direito do mouse no elemento que será mascarado e selecione Colar ou Substituir máscara.
Na linha do tempo do Modo avançado:
- Caso você queira transferir a máscara para outro elemento original, arraste a camada dela até a do elemento desejado. Não é possível fazer isso para substituir uma máscara.
- Se quiser copiar a máscara para outro elemento, segure a tecla Alt ao arrastar a camada correspondente. Também não é possível fazer isso para substituir uma máscara.
Atalhos do teclado:
- Recortar: Ctrl+X (Windows) ou ⌘+X (Mac)
- Copiar: Ctrl+C (Windows) ou ⌘+C (Mac)
- Colar: Ctrl+V (Windows) ou ⌘+V (Mac)
Comandos de menu:
- Editar > Recortar
- Editar > Copiar
- Editar > Colar ou Substituir máscara

As animações da máscara também serão coladas.

Limitações para copiar e colar máscaras

Só é possível selecionar uma máscara para recortar ou copiar e um único elemento em que ela será colada.
Colar uma máscara em um elemento que já tem uma substituirá a existente.
Não é possível recortar, copiar nem colar máscaras em regras de mídia.

Mover uma máscara

Selecione a máscara a ser movida e use um dos seguintes métodos:

Edite as propriedades da posição superior e esquerda no painel Propriedades. Esses valores são relativos ao canto superior esquerdo do elemento original.
Use as teclas de seta para mover a máscara um pixel por vez. Segure a tecla Shift enquanto pressiona uma tecla de seta para mover a máscara em 10 pixels.
Use a ferramenta Seleção para arrastar a máscara com o mouse. Segure a tecla Shift ao arrastar para mover a máscara somente ao longo de um único eixo.

As máscaras podem ser posicionadas fora dos limites do elemento original.

Observação: máscaras de imagens e máscaras de gradiente não podem usar posicionamento com base em porcentagem.

Redimensionar uma máscara

Selecione a máscara que você quer redimensionar. Depois faça o seguinte:

Edite as propriedades de largura e altura no painel Propriedades.
Use a ferramenta Seleção com a opção Controle de transformação ativada na barra de opções da ferramenta, na parte superior.
- Segure a tecla Shift ao arrastar os pontos para manter a proporção.
- Segure a tecla Alt (Windows) ou Option (Mac) enquanto arrasta para redimensionar a máscara sem mudar o ponto central.

Girar uma máscara

As máscaras não podem ser giradas diretamente, mas é possível ter o mesmo efeito seguindo estas etapas antes de adicionar a máscara:

Una o elemento que você quer mascarar.
Adicione a máscara ao div do contêiner.
Gire o div do contêiner. A máscara também girará.
Gire o elemento original na direção oposta.

Alterar a origem de uma máscara de imagens

É possível trocar a imagem usada por uma máscara de imagens seguindo estas etapas:

Selecione a máscara.
No painel Propriedades, clique no botão Definir máscara de imagens no campo Origem.
Selecione uma imagem da Biblioteca ou clique no botão Importar recursos para usar outra imagem.
Clique em OK.

Alterar o gradiente de uma máscara de gradiente

É possível personalizar o gradiente usado em uma máscara de gradiente.

Selecione a máscara.
No painel Propriedades, clique na amostra de gradiente.
Edite o gradiente:
- Tipo de gradiente: clique no botão Gradiente linear ou Gradiente radial .
- Distância de transição: arraste um marcador de transparência ao longo da parte superior da barra de gradientes para alterar a distância de transição.
- Transparência: os marcadores de transparência definem o nível de opacidade em um ponto específico ao longo do gradiente. O valor de 100% indica que o elemento original está totalmente visível e o de 0% indica que ele está totalmente oculto. Clique em um marcador de transparência para editar o nível de opacidade no campo de porcentagem à direita.
- Marcadores de transparência adicionais: para adicionar mais marcadores de transparência, clique na barra de gradientes. Para remover um marcador de transparência, arraste-o para baixo.
- Ângulo: é possível ajustar o ângulo dos gradientes lineares.
- Padrão: clique no botão Gradiente padrão para redefinir o gradiente para as configurações padrão (um gradiente linear de 0% a 100% a 90 graus).

Mudar a curvatura dos cantos de uma máscara de retângulo

Você pode mudar os cantos de uma máscara de retângulo para que fique quadrado ou arredondado e ajustar o raio da curvatura dos cantos arredondados.

Selecione a máscara.
No painel Propriedades, ajuste o raio do canto em pixels ou em porcentagem. Definir o raio como 0 torna os cantos quadrados.
Quando o botão Manter idêntico estiver ativo, o mesmo valor será aplicado a todos os quatro cantos. Desative o botão para configurar cada canto separadamente.

Mudar a forma de uma máscara poligonal

É possível ajustar a forma de uma máscara poligonal no cenário:

Selecione a máscara.
Selecione Máscara poligonal na barra de ferramentas. As alças serão exibidas em cada vértice.
Arraste cada vértice até onde quiser.
- Segure a tecla Shift enquanto arrasta para mover o vértice em um único eixo (vertical ou horizontal).

Observação: não é possível mudar o número de lados de uma máscara poligonal existente.

Animar máscaras

É possível animar o tamanho e a posição de uma máscara. Também é possível usar intervalos de visibilidade para controlar quando uma máscara aparece ou desaparece. A animação de uma máscara é independente de qualquer animação do elemento original.

Para máscaras de retângulo, você pode animar cantos arredondados. Também é possível animar a forma de uma máscara de trajetória de corte reposicionando os vértices em um frame-chave, embora não seja possível mudar o número de lados.

Não é possível editar as máscaras em vários frames ao mesmo tempo. Selecione um frame-chave de cada vez para editar a animação da máscara.

Observação: ao animar máscaras de imagem em velocidades mais lentas, será possível perceber um efeito de instabilidade, já que os valores de pixels fracionários entre os frames-chave são arredondados.

Compatibilidade do navegador

A animação das máscaras de trajetória de corte não será exibida no Safari se o documento tiver elementos <canvas>, como no componente "Galeria com transição", "Efeito de imagem" ou "Efeitos de partículas".

Máscaras em layouts responsivos

Com as regras de mídia, é possível modificar as propriedades e a animação da máscara para intervalos de tamanho específicos da janela de visualização. Nas máscara de imagens, também é possível modificar a origem para usar uma imagem diferente. Nas máscaras de gradiente, é possível alterar o gradiente.

Observação: remover a modificação de uma propriedade de posição ou tamanho redefine automaticamente as propriedades de posição (superior e esquerda) e tamanho (largura e altura). Nas máscaras de trajetória de corte, todas as propriedades de posição e tamanho serão redefinidas.

Isso foi útil?

Como podemos melhorá-lo?