Esta página foi traduzida pela API Cloud Translation.

Primeiros passos com os formatos CSS

Como incluir conteúdo em caminhos personalizados

Razvan Caliman

Por muito tempo, os designers da Web foram forçados a criar dentro das restrições do retângulo. A maioria do conteúdo na Web ainda está presa em caixas simples porque a maioria das iniciativas criativas em layouts não retangulares terminam 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 designers da Web envolvam o conteúdo em caminhos personalizados, como círculos, elipses e polígonos, se livrando 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 ingênuo quanto eu ao flutuar pela primeira vez uma imagem com partes transparentes esperando que o conteúdo se envolvia e preenchesse as lacunas, mas depois se decepcionei com a forma retangular que persistia 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. Embora a propriedade shape-outside defina a forma da área em torno da qual o conteúdo será ajustado, sem o float, você não vai notar 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 à esquerda, a área flutuante será criada à direita da xícara. Mesmo que você possa criar uma imagem com lacunas nos dois lados, o conteúdo só será ajustado em torno da forma no lado oposto designado pela propriedade de flutuação, à esquerda ou à direita, nunca ambos.

No futuro, será possível usar shape-outside em elementos que não flutuam 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 é associada a uma caixa de referência que estabelece o sistema de coordenadas. Mais informações sobre as caixas de referência em breve.

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 as 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 envolve o lado de fora de um caminho circular. O único argumento 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 da forma circular. 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 CSS Masking: clip-path ou mask-image. A propriedade clip-path é muito útil porque segue a mesma notação dos shapes do CSS. Assim, você pode 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.

Voltando à forma circular.

Ao usar porcentagens para o raio do círculo, o valor é calculado com uma fórmula um pouco mais complexa: sqrt(largura^2 + altura^2) / sqrt(2). É útil entender isso porque ajuda a imaginar como será a forma 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. Você pode escolher o que for mais flexível ou rígido 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 introduzimos 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 está 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 torno da qual o conteúdo será agrupado. 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 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. Nesse 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 de acordo com o aumento da superfície do sistema de coordenadas estabelecido pela caixa de referência margin-box.