As funcionalidades CSS para shapes, clipping e masking

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)

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.