O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Como começar a usar as formas CSS

Como ajustar o conteúdo em torno de caminhos personalizados

Razvan Caliman

Por muito tempo, os web designers foram forçados a criar dentro das restrições do retângulo. A maior parte do conteúdo na Web ainda está presa em caixas simples porque a maioria das tentativas criativas de layout não retangular termina em frustração. Isso está prestes a mudar com a introdução das formas CSS, disponíveis a partir do Chrome 37. As formas CSS permitem que os web designers envolvam o conteúdo em caminhos personalizados, como círculos, elipses e polígonos, libertando-se das restrições do retângulo.

As formas podem ser definidas manualmente ou inferidas de imagens.

Vamos analisar um exemplo bem simples.

Talvez você tenha sido tão ingênuo quanto eu ao flutuar uma imagem com partes transparentes pela primeira vez, esperando que o conteúdo se ajustasse e preenchesse as lacunas, mas se decepcionou com a forma retangular que persistiu ao redor do elemento. As formas CSS podem ser usadas para resolver esse problema.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

A declaração CSS shape-outside: url(image.png) instrui o navegador a extrair uma forma da imagem.

A propriedade shape-image-threshold define o nível mínimo de opacidade dos pixels que serão usados para criar a forma. O valor precisa estar no intervalo entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco). Portanto, shape-image-threshold: 0.5 significa que apenas pixels com opacidade de 50% ou mais serão usados para criar a forma.

A propriedade float é fundamental aqui. Embora a propriedade shape-outside defina o formato da área em que o conteúdo será ajustado, sem o float, você não verá os efeitos do formato.

Os elementos têm uma área flutuante no lado oposto do valor float. Por exemplo, se um elemento com uma imagem de xícara de café estiver flutuando à esquerda, a área de flutuação será criada à direita da xícara. Mesmo que você possa criar uma imagem com lacunas em ambos os lados, o conteúdo só vai se ajustar à forma no lado oposto designado pela propriedade float, esquerda ou direita, nunca ambas.

No futuro, será possível usar shape-outside em elementos que não são flutuantes com as exclusões de CSS de introdução.

Como criar formas manualmente

Além de extrair formas de imagens, você também pode codificá-las manualmente. É possível escolher entre alguns valores funcionais para criar formas: circle(), ellipse(), inset() e polygon(). Cada função de forma aceita um conjunto de coordenadas e é pareada com uma caixa de referência que estabelece o sistema de coordenadas. Vamos falar mais sobre as caixas de referência em breve.

A função circle()

A notação completa para um valor de forma de círculo é circle(r at cx cy), em que r é o raio do círculo, enquanto cx e cy são coordenadas do centro do círculo nos eixos X e Y. As coordenadas do centro do círculo são opcionais. Se você omitir esses valores, o centro do elemento (a interseção das diagonais) será usado como padrão.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

No exemplo acima, o conteúdo vai se ajustar ao redor de um caminho circular. O argumento único 50% especifica o raio do círculo, que, neste caso específico, equivale à metade da largura ou altura do elemento. Mudar as dimensões do elemento vai influenciar o raio do formato de círculo. Este é um exemplo básico de como as formas CSS podem ser responsivas.

Antes de continuar, uma observação rápida: é importante lembrar que as formas CSS influenciam apenas a forma da área flutuante ao redor de um elemento. Se o elemento tiver um plano de fundo, ele não será cortado pela forma. Para conseguir esse efeito, use as propriedades de máscara CSS: clip-path ou mask-image. A propriedade clip-path é muito útil porque segue a mesma notação das formas CSS, então é possível reutilizar valores.

Ilustração da forma `circle()` + clip-path

As ilustrações neste documento usam o recorte para destacar a forma e ajudar você a entender os efeitos.

Volte para a forma de círculo.

Ao usar porcentagens para o raio do círculo, o valor é calculado com uma fórmula um pouco mais complexa: sqrt(width^2 + height^2) / sqrt(2). É útil entender isso porque ajuda a imaginar qual será o formato do círculo resultante se as dimensões do elemento não forem iguais.

Todos os tipos de unidade CSS podem ser usados em coordenadas de função de forma: px, em, rem, vw, vh etc. Escolha a opção que seja flexível ou rígida o suficiente para suas necessidades.

É possível ajustar a posição do círculo definindo valores explícitos para as coordenadas do centro.

.element{
  shape-outside: circle(50% at 0 0);
}

Isso posiciona o centro do círculo na origem do sistema de coordenadas. O que é o sistema de coordenadas? É aqui que apresentamos as caixas de referência.

Caixas de referência para formas CSS

A caixa de referência é uma caixa virtual ao redor do elemento, que estabelece o sistema de coordenadas usado para desenhar e posicionar a forma. A origem do sistema de coordenadas fica no canto superior esquerdo, com o eixo X apontando para a direita e o eixo Y apontando para baixo.

Lembre-se de que shape-outside altera a forma da área flutuante em que o conteúdo será disposto. A área flutuante se estende até as bordas externas da caixa definida pela propriedade margin. Isso é chamado de margin-box e é a caixa de referência padrão para uma forma se nenhuma for mencionada explicitamente.

As duas declarações CSS a seguir têm resultados idênticos:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Ainda não definimos uma margem no elemento. Neste ponto, é seguro presumir que a origem do sistema de coordenadas e o centro do círculo estão no canto superior esquerdo da área de conteúdo do elemento. Isso muda quando você define uma margem:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

A origem do sistema de coordenadas agora está fora da área de conteúdo do elemento (100 px para cima e 100 px para a esquerda), assim como o centro do círculo. O valor calculado do raio do círculo também aumenta para considerar a superfície maior do sistema de coordenadas estabelecido pela caixa de referência margin-box.