CSS

19 nov, 2018

CSS Shapes – Muito mais que retângulos ou quadrados

Publicidade

A web mudou de maneira drástica nos últimos cinco anos – JavaScript ganhou muita força e tornou-se uma linguagem ainda mais robusta, CSS mudou completamente com a chegada do Grid Layout, tornando-se uma opção perfeita para se trabalhar de maneira eficiente e, acompanhada do Flexbox, tornou-se uma propriedade muito poderosa.

Hoje, nós, desenvolvedores front-end temos muitas opções, ferramentas e tecnologias disponíveis para nos ajudar no desenvolvimento de qualquer projeto, mas com isso a gente acaba tendo uma confusão enorme em relação ao que estudar e o no que se aprofundar.

Eu mesmo, durante muito tempo, fiquei confuso, não sabia para onde seguir, mas de uns tempos para cá venho concentrando minha atenção em coisas nativas relacionadas às CSS e gostaria de compartilhar aqui um tema que venho estudando e vejo sendo pouco falado em terras tupiniquins, CSS Shapes.

Vou dar uma abordagem prática sobre essa especificação que, apesar de não ser nova, ainda está sendo novidade para alguns navegadores (o Firefox, por exemplo, vai começar a dar suporte a partir da versão 62 que foi lançada em setembro para o público).

O problema em se trabalhar com formas em CSS

Trabalhar com formas em CSS sempre foi uma dor de cabeça – de modo geral, ou usávamos imagens ou um conjunto de hacks (gambiarras) pra desenhar coisas na nossa página.

Ok, apesar de tudo, não é o pior dos mundos. Se você souber trabalhar com bordas, position, transform e display de maneira concisa, é possível criar praticamente qualquer formato para a sua página ou aplicação.

Isso geralmente é muito utilizado em sites institucionais ou com conceitos de design bem avançados – podemos encontrar círculos, triângulos, polígonos, entre outras formas que não são triviais no dia a dia.

Tudo isso é muito legal e desafiador, mas o problema real de lidar com essas formas é como os elementos ao redor vão se comportar ou como esses elementos podem fazer parte dessas formas de maneira fluida dentro do layout proposto, como se fossem uma única coisa. Vamos ver o exemplo da imagem abaixo.

Percebe como o texto flutua ao redor do prato no qual o bolo se encontra? Ele flui perfeitamente sem conflitar com o prato, e vice-versa.

Antes, replicar isso em uma página web seria extremamente complicado e trabalhoso, especialmente se você tivesse que criar uma página adaptável aos mais diversos tipos de dispositivos existentes.

Seria uma dor de cabeça tremenda, por isso, para a web nessa situação específica, os elementos geralmente ficam “sozinhos”, ou seja, nenhum elemento vai flutuar ao redor de nenhuma forma, ou, se o fizer, será extremamente trabalhoso para o desenvolvedor, tendo que recorrer a diversos hacks e nem se fala em responsividade para isso, né?!

Pensando nisso, a Adobe apresentou ao W3C em 2012 a especificação para CSS Shapes, que tem como objetivo principal facilitar a criação de layouts ainda mais complexos, nos quais elementos possam flutuar ao redor de qualquer forma, seja circular, polígono e até mesmo uma imagem ou foto, por exemplo.

Essa é então mais uma arma muito poderosa para que nós, desenvolvedores front-end, possamos usar para trabalhar com layouts mais evoluídos, sem dificuldade, sem dor de cabeça, com melhor performance e sem gambiarras. Uma solução limpa e eficaz para aplicar nesse contexto.

Bom, agora vamos aprender a usar as propriedades dessa especificação?

As propriedades do CSS Shapes

Antes de mais nada, precisamos atender a duas condições para que seja possível trabalhar com CSS Shapes.

  • 1) O elemento com forma deve usar float, apesar de ser uma técnica antiga e já substituída por Grid e/ou Flexbox. Nesse contexto, o elemento deve estar, sim, com float.
  • 2) Os elementos com formas devem ter um bloco com altura ou largura definidas intrinsecamente ou não, pois é através dessas propriedades que os elementos ao redor vão flutuar.

Bom, nós temos duas propriedades que podem ser utilizadas, são elas:

  • – shape-outside: faz com que o conteúdo flutue ao redor do elemento, mas externamente.
  • – shape-inside: faz com que o conteúdo flutue ao redor do elemento, mas internamente.

E nós temos algumas opções para utilizarmos com essas propriedades. São elas:

  • – circle();
  • – elipse();
  • – inset();
  • – url();
  • – polygon();

Todas essas funções recebem um grupo de argumentos. Vou falar especificamente de cada uma delas aqui.

É possível trabalhar com as propriedades shape-margin, que trabalham junto do shape-outside e shape-padding que trabalha junto com shape-inside. Dessa forma, é possível ter um espaço definido entre o elemento com forma e o conteúdo que fica flutuando ao seu redor sem muita dificuldade.

Dito isso, vou explicar cada uma das funções que existem em CSS Shapes.

A) circle()

Circle recebe um conjunto de argumentos e, caso não os aplique, o conteúdo externo ou interno vai flutuar do mesmo jeito em relação ao elemento com forma, porém sem nenhum tipo de controle, ou seja, o navegador vai usar valores padrão.

Os elementos ao redor flutuam de forma circular, obviamente, e não precisam necessariamente de nenhum argumento pra funcionar, porém vocês podem inserir dois argumentos, conforme mostrado abaixo:

  • shape-outside: circle( <shape-radius> at <posição>);
    shape-radius: nada mais é do que o raio da forma, ou seja, a partir do centro, você pode definir o tamanho que desejar do raio. Se preferir, existem duas opções, closest-side (a partir do centro até o lado mais próximo) e furtherst-side (a partir do centro até o lado mais distante).
  • posição: recebe dois valores, posicionamento horizontal e vertical, ou seja, define o posicionamento do raio da forma.

Link de exemplo: http://bit.ly/circle-css

B) ellipse()

Essa função é muito próxima da função circle, recebe praticamente os mesmos argumentos, mas com uma pequena diferença: ela recebe dois argumentos relacionados ao raio e somente isso.

Link de exemplo: http://bit.ly/ellipse-css

C) inset()

A função inset() trabalha de um até quatro valores que estão relacionados aos boxes de referência (largura e altura intrínsecas) e o box model dos elementos. Além disso, recebe outro parâmetro que nada mais é do que o raio de curvatura, igual a circle() e elipse().

  • shape-outside: inset( <shape-arguments (de 1 até 4)>, <round>);
    shape-arguments: Refere-se aos quatro pontos que formam o box de referência, ou seja, topo do box, o lado esquerdo, o inferior do box e o lado direito.
  • round: Trata-se do quanto o elemento terá seus cantos arredondados – esse argumento é opcional.

Link de exemplo: http://bit.ly/inset-css

D) polygon()

Essa é a função mais complexa e com mais opções exatamente pelo fato de ser utilizada para que os elementos ao redor possam flutuar de maneira mais abrangente. Ela é muito utilizada para lidar com imagens, por exemplo. A função admite um conjunto maior de opções pelo fato de criar diversos pontos que vão construir a forma desejada. É uma função que pode ser usada a partir de três pontos na forma.

  • shape-outside: polygon(<fill-rule>, <shape-arg><shape-arg>);
    fill-rule: refere-se ao interior do polígono, ou seja, como ele será preenchido por dentro – é isso que dará forma para o elemento.
  • shape-arg: São os pontos que formarão o elemento de fato, ou seja, esses argumentos aceitam alguns valores relacionados a tamanho, como PX ou %.

Link de um exemplo para deixar mais claro o conceito: http://bit.ly/polygon-css

Concluindo

Existe um mundo à parte a ser explorado em CSS Shapes. Poderíamos falar muito mais e de maneira mais profunda sobre isso, mas acredito que o que mostrei aqui já é suficiente para testar e entender todos os conceitos propostos por essa especificação.

Com CSS Shapes, o design das páginas em que trabalhamos tem ganhos tremendos e, claro, com muita facilidade para quem desenvolve, sem a necessidade de hacks malucos. É mais uma propriedade moderna que chega com força (apesar de não ser nada novo).

Se quiser mais material, tem um em português bem completo do Maujor, traduzido de um artigo escrito no A list Apart.

Recomendo fortemente a leitura pra quem quiser expandir o aprendizado em relação ao que está sendo criado e também vale a leitura diretamente da especificação da W3C. Os links seguem abaixo:

E é isso, espero que tenham gostado e que tenha ajudado vocês. Qualquer dúvida, estarei nas redes sociais pelo @raffaeldantass.

***

Artigo publicado na revista iMasters, edição #28: https://issuu.com/imasters/docs/imasters_28_v5_issuu