Um conjunto de recursos novos do CSS permite desenhar páginas web fora do formato de caixa. A função shape() e as propriedades border-shape e corner-shape dão a designers e desenvolvedores contornos curvos, recortes e bordas com forma livre, sem plug-in nem JavaScript.
A shape() descreve uma forma por coordenadas geométricas. Ao contrário da antiga path(), que dependia de SVG e só aceitava pixels, ela usa a sintaxe do CSS e se adapta ao tamanho da página. Combinada com a propriedade clip-path, já é usada para desenhar canhotos de ingresso e balões de conversa. A border-shape leva essas coordenadas para a própria borda do elemento. O contorno é definido no começo da renderização, em vez de ser recortado no fim.
"Em outras palavras, colocar bordas em formas CSS vai virar brincadeira de criança", escreveu Temani Afif, que se descreve como hacker de CSS, em um tutorial no site CSS-Tricks (em tradução livre).
Nos exemplos dele, dá para pôr bordas dentro de bordas, recortar um coração dentro de um quadrado e animar o contorno quando o mouse passa por cima. Para quem não quer escrever coordenadas, a corner-shape traz cantos prontos: arredondados, chanfrados, com entalhe e o "squircle", meio quadrado, meio círculo.
Segundo o site caniuse.com, todos os navegadores principais já suportam a shape(). A border-shape e a corner-shape ainda são experimentais, mas as versões atuais de Chrome, Edge e Opera já as aceitam. Quando o W3C publicou o primeiro padrão de layout web, em 1996, as páginas copiavam a grade de jornais e revistas. HTML e CSS só desenhavam linhas horizontais e verticais; formas livres exigiam Flash, applets Java ou SVG preso a uma área da página.
Com informações de theregister.com.
Fontes
Quer ver o resumer primeiro nas buscas do Google?
Adicionar às Fontes Preferidas do Google
