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

Usar o recorte em CSS pode nos ajudar a deixar de lado tudo o que parece uma caixa em nossos designs. 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 tudo parecer uma caixa. Você pode usar a propriedade CSS clip-path para recortar partes de uma imagem ou outro elemento, para 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, é possível ver algo mais sobre a propriedade clip-path. Só é possível clicar na área visível da imagem, pois os eventos não são acionados nas partes ocultas da imagem.

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

Para navegadores legados, uma alternativa pode ser permitir que o navegador ignore a propriedade clip-path e mostre a imagem não recortada. 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 aceita vários valores. O valor usado no exemplo inicial era 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 seja ajustado em torno dessa forma.

A lista completa de formas básicas é:

• inset()
• circle()
• ellipse()
• polygon()

inset()

O valor inset() insere a área recortada da borda do elemento. e podem receber valores 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, ambas com uma classe de .box. A primeira caixa não tem recorte, a segunda é recortada usando valores inset().

circle()

Como você viu anteriormente, o valor circle() cria uma área recortada circular. O primeiro valor é um comprimento ou 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. Você também pode usar comprimentos ou porcentagens.

Cuidado com cantos arredondados!

Esteja ciente de que, 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 estenderia para fora do tamanho natural da imagem, você terá uma borda plana.

ellipse()

Uma elipse é essencialmente um círculo achatado, e age muito como 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 descobrir as possibilidades, confira Clippy, um gerador de clip-path, depois 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. Eles estão relacionados ao modelo de caixa CSS: a caixa de conteúdo, a caixa de padding, a caixa de borda, e a caixa de margem com os valores de palavra-chave content-box, border-box, padding-box e margin-box.

Esses valores podem ser usados sozinhos ou junto com um polígono básico para definir a caixa de referência usada pelo polígono. O exemplo a seguir recortaria a forma na borda do conteúdo.

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

Nesse exemplo, o círculo usaria a content-box como 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 oferecem suporte ao uso de valores de caixa para a propriedade clip-path. No entanto, eles 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 SVG clipPath. 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 em que a animação pode ser usada com recortes. A animação com o clipe-path em CSS Tricks apresenta algumas ideias.

Foto de Matthew Henry no Burst.