As funcionalidades CSS para shapes, clipping e masking

visualizações Publicado em: 16/06/2017

Crédito: essa matéria é uma tradução adaptada e foi escrita por Belén Albeza. URL do original: CSS Shapes, clipping and masking – and how to use them. Está licenciada de acordo com Creative Commons Attribution Share-Alike License v3.0 ou versão posterior.

Introdução

Foi lançada em 13/06/2017 a versão 54 do navegador Firefox e com ela criadas novas funcionalidades nativas para a propriedade CSS clip-path.

A propriedade clip-path permite que se recorte partes de um elemento. As versões anteriores do Firefox permitiam o recorte de um elemento apenas com uso de uma forma criada com SVG

A atual versão 54 do Firefox permite que se recorte um elemento com uso de formas criadas com CSS (CSS shapes) tais como: insets, círculos, elipses e polígonos!

Nota: este tutorial apresenta vários exemplos que para serem visualizados adequadamente requerem o uso de navegadores que ofereçam suporte para clip-path e mask. Para renderizar e interagir com exemplos aqui mostrados visualize-os no Firefox 54 ou posterior.

Exemplos básicos

O exemplo a seguir demonstra o uso do elemento <clipPath> da SVG para se obter o recorte de uma imagem. Esse exemplo é suportado por versões anteriores a versão 54 do Firefox:

See the Pen clip-path (static SVG mask) by ladybenko (@ladybenko) on CodePen.


O uso do elemento <clipPath> permite que se obtenha animações SVG como mostrado no exemplo a seguir:

See the Pen clip-path (animated SVG) by ladybenko (@ladybenko) on CodePen.


Conforme dito anteriormente, o Firefox 54 e posteriores suportam as funções de CSS shape para obter efeitos de recorte sem a necessidade de uso de SVG. As funções para se obter recortes são: circle, ellipse, inset e polygon. O exemplo a seguir ilustra o uso de tais funções:

See the Pen oWJBwW by ladybenko (@ladybenko) on CodePen.


E mais ainda, também podemos obter efeitos de animação com CSS. As restrições para animação são: não é possível “combinar” funções (ou seja, animar uma trasformação de um circle para um inset), e em uma animação com uso de polygon o número de vértices do polígino deve ser constante durante a animação.

No exemplo a seguir mostramos uma animação simples usando a função circle:

See the Pen Animated clip-path by ladybenko (@ladybenko) on CodePen.


No exemplo a seguir mostramos uma animação simples usando a função polygon. Notar que embora em uma animação com uso da forma polígono tenhamos que manter constante o número de vértices é possível, durante a animação, posicionar dois ou mais vértices em linha reta. Isso cria a ilusão de animação de um polígono variando o número de seus lados.

See the Pen Animated clip-path (polygon) by ladybenko (@ladybenko) on CodePen.


Convém ressaltar que a propriedade CSS clip-path fornece ainda alternativas para obtenção de layout. No exemplo a seguir mostramos o uso da propriedade para obter o posicionamento de uma imagem no layout multi colunar de um artigo:

See the Pen Layout example by ladybenko (@ladybenko) on CodePen.


Incrementando com JavaScript

Combinar clip-path com JavaScript possibilita a obtenção de efeitos interessantes. No exemplo a seguir mostramos a simulação de um tour por um tutorial:

See the Pen tour with clip-path by ladybenko (@ladybenko) on CodePen.

Nesse exemplo usamos JavaScript para capturar as dimensões de um elemento, calcular a distância em relação a um container e com tais dados atualizar uma forma do tipo inset a ser usada na propriedade CSS clip-path.

É possível alterar o posicionamento da forma de acordo com input do usuário, conforme mostrado no exemplo a seguir no qual foi criado o efeito “periscópio” que é controlado pelo movimento do mouse do usuário:

See the Pen clip-path (periscope) by ladybenko (@ladybenko) on CodePen.

clip-path ou mask?

Existe uma propriedade CSS similar, mas não idêntica, à propriedade CSS clip-path denominada mask. Usar uma ou outra depende de cada caso. Notar que o suporte para mask varia de acordo com o navegador e atualmente o Firefox é o único navegador que suporta todas as funcionalidades para mask, assim, use o Firefox 54 para interagir com os exemplos que se seguem.

Masking pode usar uma imagem ou o elemento <mask> da SVG. Por outro lado clip-path usa um caminho SVG ou uma CSS shape.

Masking modifica a aparência do elemento. Nesse exemplo mostramos, uma máscara circular preenchida com gradiente linear:

Linear gradient mask

E, não esqueça que podemos usar imagens bitmap mesmo as que não tenham um canal alpha (transparência), bastando para isso ajustar mask-mode como mostrado a seguir:

mask-mode example

A chave do funcionamento de masking reside no fato de que há uma modificação dos pixels da imagem, alterando seus valores – para até um valor totalmente transparente.

Por outro lado, clipping “recorta” o elemento. Observe o exemplo a seguir que mostra uma mesma imagem "mascarada" e "recortada" com uso de uma mesma forma de cruz. Passe o mouse sobre as imagens e observe. Você notará que na imagem "mascarada" as áreas que colidem contém a parte mascarada. Na imagem recortada as áreas que colidem são as únicas visíveis (ou seja, a forma de cruz).

Mask vs clip comparison

"Mascarar" é superior a "recortar", ou vice versa? Não, elas se prestam a diferentes finalidades.

Faço votos que esse tutorial tenha despertado sua curiosidade para a propriedade CSS clip-path.


Leitura complementar

CSS Shapes (abre em nova janela)

Propriedade CSS clip (abre em nova janela)

topo