Crie formas de imagens interessantes com a propriedade clip-path do CSS's

O uso do recorte no CSS pode ajudar a evitar que tudo nos nossos designs pareça uma caixa. Ao usar várias formas básicas ou um SVG, é possível criar um caminho de clipe. Em seguida, corte as partes de um elemento que você não quer mostrar.

Rachel Andrew

Os elementos nas páginas da Web são todos definidos dentro de uma caixa retangular. No entanto, isso não significa que precisamos fazer com que tudo pareça uma caixa. É possível usar a propriedade CSS clip-path para cortar partes de uma imagem ou de outro elemento e criar efeitos interessantes.

No exemplo acima, a imagem do balão é quadrada (source). Usando clip-path e o valor básico de forma de circle(), o céu adicional ao redor do balão é recortado, deixando uma imagem circular na página.

Como a imagem é um link, você pode conferir mais informações sobre a propriedade clip-path. Só é possível clicar na área visível da imagem, já que os eventos não são disparados nas partes escondidas.

O recorte pode ser aplicado a qualquer elemento HTML, não apenas a imagens. Existem algumas maneiras diferentes de criar um clip-path. Vamos dar uma olhada nesta postagem.

Compatibilidade com navegadores

Compatibilidade com navegadores

  • Chrome: 55.
  • Borda: 79.
  • Firefox: 3.5.
  • Safari: 9.1.

Origem

Para navegadores legados, uma alternativa pode ser permitir que o navegador ignore a propriedade clip-path e mostre a imagem sem corte. Se isso for um problema, teste clip-path em uma consulta de recurso e ofereça um layout alternativo para navegadores sem suporte.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

Formas básicas

A propriedade clip-path pode assumir vários valores. O valor usado no exemplo inicial foi circle(). Esse é um dos valores de forma básicos, que são definidos na especificação de formas do CSS. Isso significa que você pode recortar uma área e também usar o mesmo valor para shape-outside para fazer com que o texto contorne essa forma.

A lista completa de formas básicas é:

inset()

O valor inset() insere a área recortada da borda do elemento e pode receber valores para as bordas superior, direita, inferior e esquerda. Também é possível adicionar uma border-radius para curvar os cantos da área recortada usando a palavra-chave round.

No meu exemplo, tenho duas caixas com uma classe de .box. A primeira caixa não tem recorte, a segunda é recortada usando valores inset().

circle()

Como você viu, o valor circle() cria uma área circular cortada. O primeiro valor é uma medida 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 palavras-chave para definir o círculo cortado no canto superior direito. Também é possível usar comprimentos ou porcentagens.

Cuidado com cantos arredondados!

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, você terá uma borda plana.

Um círculo recortado com bordas planas
A imagem usada anteriormente agora tem circle(50%) aplicado. Como a imagem não é quadrada, atingimos a caixa de margem nas partes de cima e de baixo e o círculo é cortado.

ellipse()

Uma elipse é basicamente um círculo achatado, portanto, funciona de maneira muito semelhante a circle(), mas aceita um raio para x e um raio para y, além do valor para o 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 criar polígonos e conferir o que é possível, confira o Clippy, um gerador de clip-path, e copie e cole o código no seu projeto.

Formas de valores de caixa

Também definidas em CSS, as formas são valores de caixa. Elas estão relacionadas ao modelo de caixa do CSS: caixa de conteúdo, caixa de padding, caixa de borda e 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 com uma forma básica para definir a caixa de referência usada pela forma. Por exemplo, o código a seguir recorta a forma na borda do conteúdo.

.box {
  clip-path: content-box;
}

Neste 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 aceitam o uso de valores de caixa para a propriedade clip-path. No entanto, elas são compatíveis com shape-outside.

Usar um elemento SVG

Para ter mais controle sobre a área cortada do que é possível com formas básicas, use um elemento clipPath SVG. Em seguida, faça referência a esse ID usando url() como o valor de clip-path.

Como animar a área cortada

As transições e animações do CSS podem ser aplicadas ao clip-path para criar alguns efeitos interessantes. No próximo exemplo, estou animando 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 de usar a animação com o recorte. Animar com clip-path no CSS Tricks apresenta algumas ideias.

Foto de Matthew Henry no Burst.