Efeitos de CSS

Use efeitos de CSS para adicionar efeitos visuais aos elementos ou para configurar a combinação deles com elementos sobrepostos. Os efeitos de CSS podem ser animados e substituídos em regras de mídia.

É possível ver as configurações de efeitos de CSS no painel Efeitos de CSS quando um único elemento é selecionado. Caso o painel não esteja visível no espaço de trabalho, alterne-o no menu Janela.

Não é possível aplicar efeitos de CSS em máscaras.

Modo de mistura

Esse modo determina como o conteúdo de um elemento se mistura ao plano de fundo dele, com base nos valores de matiz, saturação e brilho do elemento e nas cores do plano de fundo.

Para aplicar um modo de mistura, faça o seguinte:

Selecione o elemento que você quer mesclar com o plano de fundo.
No painel Efeitos de CSS, use o menu suspenso Modo mesclado para escolher um modo de combinação.

Tente selecionar diferentes modos para visualizar o efeito deles. Se um elemento não estiver misturando conforme esperado, confira se ele está na frente dos outros elementos que você quer combinar.

Lista de modos de mistura

Normal (sem efeito): sem mistura.
Cor: usa a tonalidade e a saturação da cor do elemento e a luminosidade do plano de fundo.
Superexposição: inverte a cor do plano de fundo, divide pela cor do elemento e inverte o resultado.
Subexposição: divide a cor do plano de fundo pelo inverso da cor do elemento.
Escurecer: usa a cor mais escura do elemento ou do plano de fundo.
Diferença: subtrai a cor mais escura da cor mais clara.
Exclusão: funciona da mesma forma que o modo Diferença, mas com menos contraste.
Luz direta: aplica o modo Multiplicação se o elemento for mais escuro que o plano de fundo, ou o modo Tela se o elemento for mais claro.
Matiz: usa a tonalidade da cor do elemento e a saturação e luminosidade da cor do plano de fundo.
Clarear: usa a cor mais clara do elemento ou do plano de fundo.
Luminosidade: usa a luminosidade da cor do elemento e a tonalidade e saturação da cor do plano de fundo.
Multiplicação: multiplica a cor do elemento pela cor do plano de fundo.
Sobreposição: aplica o modo Multiplicação se o elemento for mais claro que o plano de fundo, ou o modo Tela se o elemento for mais escuro.
Saturação: usa a saturação da cor do elemento e o matiz e a luminosidade do plano de fundo.
Tela: inverte as cores do elemento e do plano de fundo, as multiplica e inverte o resultado.
Luz suave: funciona como o modo Luz direta, mas com um efeito mais suave.

Filtros

Os filtros permitem adicionar efeitos visuais a um elemento usando CSS, como desfoque ou uma sombra projetada.

Em documentos de vídeo e anúncios gráficos, você pode usar a ferramenta Pano de fundo para aplicar filtros CSS à área atrás de um elemento.

Adicionar um filtro

Para adicionar um novo filtro, faça o seguinte:

Selecione o elemento em que você quer adicionar um filtro.
No painel Efeitos de CSS, clique em Adicionar filtros.
Selecione o filtro que você quer aplicar. Os seguintes filtros estão disponíveis:
Ajuste as opções de configuração conforme necessário. Veja mais informações a seguir.

Você pode adicionar vários filtros a um elemento. Nesse caso, é possível reordenar os filtros.