As funcionalidades CSS para shapes, clipping e masking

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.