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á preso 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 de imagens.

Vamos conferir um exemplo muito simples.

Talvez você tenha sido tão ingênuo quanto eu ao flutuar uma imagem com partes transparentes, esperando que o conteúdo fosse ajustado e preenchesse as lacunas, apenas para se decepcionar com a forma retangular que persiste 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 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. Embora seja possível criar uma imagem com lacunas nos dois lados, o conteúdo só será ajustado à forma no lado oposto designado pela propriedade de flutuação, à esquerda ou à direita, nunca nos dois.

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 nas coordenadas da 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 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 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 de 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 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 para considerar a superfície aumentada do sistema de coordenadas estabelecido pela caixa de referência margin-box.