Esta página foi traduzida pela API Cloud Translation.

Primeiros passos com os formatos CSS

Delimitar o conteúdo em caminhos personalizados

Razvan Caliman

Por muito tempo, 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 dos empreendimentos criativos em um layout não retangular acaba na frustração. Isso está prestes a mudar com o lançamento das formas CSS, disponíveis a partir do Chrome 37. Os Shapes 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 a partir de imagens.

Vamos conferir um exemplo muito simples.

Talvez você tenha sido tão simples quanto eu ao flutuar pela primeira vez uma imagem com partes transparentes esperando que o conteúdo encapsule e preencha as lacunas, mas se desapontou com a forma de borda retangular que persiste ao redor do elemento. 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 o formato. 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 a forma da área ao redor do qual o conteúdo vai ser agrupado, sem o ponto flutuante, não é possível conferir os efeitos da forma.

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

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

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. Saiba mais sobre caixas de referência em breve.

A função round()

A notação completa para um valor de forma circular é 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 no eixo X e nos eixos Y. As coordenadas do centro do círculo são opcionais. Se forem omitidos, 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 será posicionado fora de um caminho circular. O argumento 50% especifica o raio do círculo, que, nesse caso específico, equivale à metade da largura ou altura do elemento. Alterar as dimensões do elemento influencia o raio da forma do círculo. Este é um exemplo básico de como os Shapes CSS podem ser responsivos.

Antes de continuar, um adendo: é importante lembrar que os Shapes 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á recortado pela forma. Para conseguir esse efeito, é necessário usar as propriedades de Máscara CSS: clip-path ou mask-image. A propriedade clip-path é muito útil porque segue a mesma notação de formas CSS. Portanto, é possível reutilizar valores.

Ilustração da forma `circle()` + trajetória de corte

As ilustrações ao longo deste documento usam recortes para destacar a forma e ajudar você a entender os efeitos.

De volta à forma de círculo.

Quando você usa 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 o 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 e assim por diante. Escolha aquele que seja flexível ou rígido o suficiente para suas necessidades.

Ajuste a posição do círculo definindo valores explícitos para as coordenadas do centro dele.

.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 introduzimos as caixas de referência.

Caixas de referência para formas CSS

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

Não esqueça que o shape-outside muda a forma da área flutuante em torno da qual o conteúdo vai ser agrupado. A área flutuante se estende até as bordas externas do box definido pela propriedade margin. Isso é chamado de margin-box e é a caixa de referência padrão para uma forma se nenhuma for explicitamente mencionada.

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 para o 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 fica fora da área de conteúdo do elemento (100 px para cima e 100 px à esquerda), assim como o centro do círculo. O valor calculado do raio do círculo também cresce para considerar o aumento da superfície do sistema de coordenadas estabelecido pela caixa de referência margin-box.