O uso de recorte no CSS pode nos ajudar a afastar todos os elementos dos designs que parecem uma caixa. Usando várias formas básicas ou um SVG, é possível criar uma trajetória de corte. Em seguida, recorte as partes de um elemento que você não quer mostrar.
Os elementos das páginas da Web são definidos dentro de uma caixa retangular.
No entanto, isso não significa que precisamos fazer tudo parecer uma caixa.
Você pode usar a propriedade CSS clip-path para recortar partes de uma imagem ou outro elemento e criar efeitos interessantes.
No exemplo acima, a imagem do balão é quadrada (fonte).
Usando clip-path e o valor de forma básico de circle(), o céu adicional ao redor do balão é cortado, deixando uma imagem circular na página.
Como a imagem é um link, é possível ver algo mais sobre a propriedade clip-path.
Só é possível clicar na área visível da imagem, já que os eventos não são acionados nas partes ocultas.
O recorte pode ser aplicado a qualquer elemento HTML, não apenas a imagens.
Existem algumas maneiras diferentes de criar um clip-path. Nesta postagem, vamos analisá-las.
Compatibilidade com navegadores
Para navegadores legados, um substituto pode ser permitir que o navegador ignore a propriedade clip-path e mostre a imagem sem cortes.
Se isso for um problema, teste clip-path em uma consulta de recurso e ofereça um layout alternativo para navegadores incompatíveis.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Formas básicas
A propriedade clip-path aceita vários valores.
O valor usado no exemplo inicial era circle().
Esse é um dos valores de forma básicos, definidos na especificação de formas do CSS.
Isso significa que você pode recortar uma área
e também usar o mesmo valor de shape-outside para fazer com que o texto se ajuste a essa forma.
A lista completa de formas básicas é:
inset()
O valor inset() insere a área cortada da borda do elemento
e pode ser transmitido para as bordas superior, direita, inferior e esquerda.
Um border-radius também pode ser adicionado para curvar os cantos da área recortada
usando a palavra-chave round.
No meu exemplo, tenho duas caixas com a classe .box.
A primeira caixa não tem corte, a segunda é recortada usando valores inset().
circle()
Como mostrado, o valor circle() cria uma área recortada circular.
O primeiro valor é um comprimento ou uma porcentagem e é o raio do círculo.
Um segundo valor opcional permite definir o centro do círculo.
No exemplo abaixo, estou usando valores de palavra-chave para definir meu círculo recortado no canto superior direito.
Você também pode usar comprimentos ou porcentagens.
Cuidado com bordas planas!
Com todos esses valores, a forma será cortada pela caixa de margem no elemento. Se você criar um círculo em uma imagem e essa forma se estender para fora do tamanho natural da imagem, haverá uma borda plana.
circle(50%) aplicado. Como a imagem não é quadrada, chegamos à caixa de margem nas partes de cima e de baixo, e o círculo é cortado.ellipse()
Uma elipse é essencialmente um círculo comprimido
e, portanto, age de forma muito parecida com circle(), mas aceita um raio para x e um raio para y,
mais o valor do centro da elipse.
polygon()
O valor polygon() pode ajudar a criar formas bastante complexas,
definindo quantos pontos forem necessários,
definindo as coordenadas de cada ponto.
Para ajudar você a criar polígonos e ver o que é possível fazer, confira o Clippy,
um gerador de clip-path.
Em seguida, copie e cole o código no seu projeto.
Formas de valores de caixa
As formas CSS também são definidas com base nos valores de caixa.
Eles estão relacionados ao modelo de caixa do CSS: a caixa de conteúdo, a caixa de padding, a caixa de borda e a caixa de margem com valores de palavra-chave de content-box, border-box, padding-box e margin-box.
Esses valores podem ser usados sozinhos ou junto com uma forma básica para definir a caixa de referência usada pelo polígono. O exemplo a seguir cortaria a forma na borda do conteúdo.
.box {
clip-path: content-box;
}
Nesse exemplo, o círculo usaria content-box como a caixa de referência, em vez de margin-box, que é o padrão.
.box {
clip-path: circle(45%) content-box;
}
No momento, os navegadores não são compatíveis com o uso de valores de caixa para a propriedade clip-path.
No entanto, eles têm suporte para shape-outside.
Como usar um elemento SVG
Para ter mais controle sobre a área cortada do que é possível com formas básicas,
use um elemento SVG clipPath.
Em seguida, faça referência a esse ID, usando url() como o valor para clip-path.
Como animar a área cortada
As animações e transições CSS podem ser aplicadas à clip-path para criar alguns efeitos interessantes.
No próximo exemplo, animamos um círculo ao passar o cursor fazendo a transição entre dois círculos com um valor de raio diferente.
Há muitas maneiras criativas pelas quais a animação pode ser usada com recorte. O artigo Animar com clip-path no CSS Tricks mostra algumas ideias.
Foto de Matthew Henry no Burst.