Formas, clipping e máscaras

No Laboratório Belavista, a foto do ateliê não precisa ser um retângulo. clip-path corta a área visível; máscaras controlam a transparência pixel a pixel.

O exemplo está em pacote de exemplos/45-formas-e-mascaras/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Formas básicas: circle(), ellipse(), inset(), polygon().
• Diferença entre clipping e masking.
• shape-outside para texto ao redor de uma forma (ideia).
• Que a caixa de layout continua retangular para clique e fluxo.

clip-path com formas

clip-path reduz o que se vê ao interior da forma. O restante some, mas o box model ainda é retangular.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Formas — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <main>
      <figure class="retrato">
        <img src="atelie.svg" width="240" height="240" alt="Fachada fictícia do ateliê Belavista">
        <figcaption>Fachada do ateliê</figcaption>
      </figure>
      <div class="selo">Novidade</div>
    </main>
  </body>
</html>

.retrato img {
  display: block;
  clip-path: circle(48% at 50% 50%);
}
.selo {
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  background: #c45c26;
  color: #fff;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Mude uma coisa. Troque circle(48%) por ellipse(50% 35%). Preveja um oval mais baixo. Recarregue. Confira.

inset, polygon e path

inset(10% round 1rem) corta uma moldura com cantos arredondados. polygon() lista pontos em porcentagem. path() aceita caminho SVG para formas compostas.

.moldura {
  clip-path: inset(8% 12% 8% 12% round 0.75rem);
}

Máscara vs clip

Clipping é geométrico: dentro ou fora. Máscara (mask-image, mask-mode) usa luminância ou alfa de uma imagem/gradiente — bordas suaves, vinheta, fade.

shape-outside: circle(50%) em float faz o texto contornar a forma. Só vale para floats; não substitui Grid/Flex no layout geral do Belavista.

Erro comum: achar que clip-path muda a área clicável para a forma. Em muitos casos o clique ainda considera a caixa retangular — teste o foco e o mouse.

Quando usar cada técnica

• Precisa de círculo ou estrela nítida? clip-path + forma básica ou polygon.
• Precisa de fade suave nas bordas? Máscara com gradiente.
• Texto ao lado de um retrato circular? Avalie shape-outside em float — ou aceite o retângulo e foque no clip visual.

O atelie.svg do exemplo é local. Se a imagem sumir, confira o caminho na mesma pasta do HTML.

Arquivo no disco. Imagem local. Teste em 127.0.0.1. Sem publicar.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Depois de clip-path: circle(50%), o elemento deixa de ocupar espaço retangular no layout?
2. Qual a diferença principal entre clip e mask?
3. Para que serve shape-outside?

Respostas comentadas

1. Não. O espaço e o fluxo continuam baseados na caixa; só a pintura fica circular.
2. Clip corta por geometria; máscara controla opacidade com uma imagem ou gradiente.
3. Empurrar o texto ao redor de uma forma em elementos flutuados.