Filtros de pano de fundo

Use a ferramenta Pano de fundo para desenhar um elemento e aplicar efeitos de filtro CSS à área atrás dele.

Esse recurso está disponível somente para anúncios gráficos e em vídeo.

Os elementos do pano de fundo precisam ser pelo menos parcialmente transparentes para que o efeito do filtro fique visível. Por padrão, novos elementos de pano de fundo são criados com um nível de opacidade 0,5. É possível mudar esse nível para ajustar a intensidade do efeito de filtro do pano de fundo.

Para adicionar um elemento de pano de fundo, siga estas etapas:

1. Selecione a forma do elemento do pano de fundo clicando e mantendo pressionada a ferramenta Pano de fundo na barra de ferramentas até um menu pop-up ser exibido:
   • Retângulo
   • Oval
   • Polígono
2. Defina opções adicionais para a forma do pano de fundo.
   • Somente para formas 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 formas 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.
3. Desenhe o elemento do pano de fundo.
   • Segure a tecla Shift ao desenhar para restringir o elemento e para que ele tenha largura e altura iguais. A tecla Shift não afeta elementos de formato livre nem determinadas formas predefinidas que, em vez disso, serão desenhadas com lados iguais: triângulo, losango, pentágono, hexágono e estrela.
   • Segure a tecla Alt para usar a posição inicial de desenho como o ponto central do elemento.
   • Depois de desenhar um pano de fundo poligonal, será possível arrastar cada vértice para alterar a forma dele, mas não será possível mudar o número de lados.
4. No painel Efeitos de CSS, configure o filtro do pano de fundo que você quer aplicar. Por padrão, o filtro de desfoque é adicionado a um novo elemento do pano de fundo. Os seguintes filtros estão disponíveis:
   • Desfoque
   • Brilho
   • Contraste
   • Sombra projetada
   • Escala de cinza
   • Rotação de matiz
   • Inversão
   • Opacidade
   • Saturação
   • Sépia

Lista de filtros do pano de fundo

Desfoque

Aplica um desfoque ao plano de fundo.

Opções de configuração

• Raio: define o raio do desfoque, de 0 a 100 pixels.

Brilho

Deixa o plano de fundo mais ou menos claro.

Opções de configuração

• Porcentagem: 0% deixa o plano de fundo preto, enquanto 100% o mantém inalterado. A porcentagem máxima é de 1.000%.

Contraste

Ajusta o contraste do plano de fundo.

Opções de configuração

• Porcentagem: 0% torna o plano de fundo cinza, enquanto 100% o mantém inalterado. A porcentagem máxima é de 1.000%.

Sombra projetada

Adiciona uma sombra projetada ao plano de fundo. Esse efeito só será visível quando for combinado com outro filtro de pano de fundo, ou se o elemento pai for parcialmente transparente.

Opções de configuração

• Deslocamento X: é a distância horizontal até a sombra projetada, de -100 a 100 pixels.
• Deslocamento Y: é a distância vertical até a sombra projetada, de -100 a 100 pixels.
• Raio: é o desfoque da sombra, de 0 a 100 pixels.
• Cor: é a cor da sombra.

Escala de cinza

Converte o plano de fundo em escala de cinza.

Opções de configuração

• Porcentagem: 0% mantém o plano de fundo inalterado, enquanto 100% o deixa completamente em escala de cinza.

Rotação de matiz

Ajusta as cores do plano de fundo.

Opções de configuração

• Ângulo: é o número de graus para girar em torno da paleta de cores, de 0 a 360°.

Inversão

Inverte as cores do plano de fundo.

Opções de configuração

• Porcentagem: 0% deixa o plano de fundo inalterado, enquanto 100% inverte completamente as cores dele. Em 50%, ele é renderizado como cinza.

Opacidade

Muda a opacidade do plano de fundo. Esse efeito só é visível quando combinado com outro filtro de pano de fundo.

Opções de configuração

• Porcentagem: 0% torna o plano de fundo completamente transparente, enquanto 100% o mantém inalterado.

Saturação

Satura o plano de fundo.

Opções de configuração

• Porcentagem: 0% torna o plano de fundo completamente não saturado, enquanto 100% o mantém inalterado. A porcentagem máxima é de 1.000%.

Sépia

Converte o plano de fundo em sépia.

Opções de configuração

• Porcentagem: 0% mantém o plano de fundo inalterado, enquanto 100% o torna completamente sépia.

Adicionar outro filtro

Os elementos do pano de fundo podem ter vários filtros. Para adicionar outro filtro, siga estas etapas:

1. Selecione o elemento do pano de fundo.
2. No painel Efeitos de CSS, clique em Adicionar filtros de pano de fundo.
3. Selecione o filtro que você quer aplicar.

Reordenar filtros

Se vários filtros forem definidos para o mesmo pano de fundo, eles serão aplicados na ordem em que aparecem no painel Efeitos de CSS.

Para reorganizar os filtros, faça o seguinte:

1. Passe o cursor sobre o nome do filtro que você quer reordenar. Você verá três pontos .
2. Usando os pontos como uma alça, arraste e solte o filtro até onde quiser colocá-lo no painel.

Ocultar um filtro

É possível ocultar um filtro para que o efeito dele não apareça no cenário, nas visualizações nem nos arquivos publicados.

Para ocultar um filtro, faça o seguinte:

1. Passe o cursor sobre o nome do filtro.
2. Clique no ícone Ocultar .
3. Para mostrar o filtro novamente, clique no ícone Mostrar .

Não é possível editar os controles dos filtros ocultos.

Excluir um filtro

Para excluir um filtro, faça o seguinte:

1. Passe o cursor sobre o nome do filtro.
2. Clique no ícone Excluir .

Como editar elementos do pano de fundo

É possível editar elementos do pano de fundo diretamente no cenário ou usando o painel de propriedades.

Redimensionar um elemento do pano de fundo

Selecione o elemento do pano de fundo 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 o elemento sem mudar o ponto central.

Mudar a curvatura dos cantos de um elemento retangular do pano de fundo

Você pode mudar os cantos de um elemento retangular do pano de fundo para que fique quadrado ou arredondado e ajustar o raio da curvatura dos cantos arredondados.

1. Selecione o elemento do pano de fundo.
2. No painel Propriedades, ajuste o raio do canto em pixels ou em porcentagem. Definir o raio como 0 torna os cantos quadrados.
3. 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 um elemento poligonal do pano de fundo

É possível ajustar a forma de um elemento poligonal do pano de fundo no cenário:

1. Selecione o elemento poligonal do pano de fundo.
2. Selecione a ferramenta Pano de fundo poligonal na barra de ferramentas. As alças serão exibidas em cada vértice.
3. 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 forma poligonal existente do pano de fundo.

Animar elementos do pano de fundo

A animação de elementos do pano de fundo está disponível apenas em documentos de vídeo.

É possível animar o tamanho, a posição e as propriedades de filtro de um elemento do pano de fundo.

Animação de um elemento oval do pano de fundo

Para elementos retangulares do pano de fundo, é possível animar cantos arredondados. No caso de elementos poligonais, você também pode animar a forma do elemento (mas não mudar o número de lados) reposicionando os vértices em um frame-chave.

Elementos do pano de fundo para layouts em vários tamanhos

Os layouts em vários tamanhos estão disponíveis apenas em anúncios gráficos.

Com os layouts em vários tamanhos, é possível substituir as propriedades do elemento do pano de fundo, incluindo propriedades de filtro, para tamanhos e intervalos de tamanho específicos. Também é possível mudar a forma de um elemento poligonal do pano de fundo.

Quando houver substituições no filtro do pano de fundo, o rótulo Filtros de pano de fundo no painel "Responsivo" será exibido em amarelo.

Assim como outros itens, só é possível adicionar ou excluir elementos do pano de fundo ao editar o documento de base.