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:
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:
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).
"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)
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.