Para desenhar um cartão com cantos do tipo squircle, defina primeiro um raio com border-radius e depois aplique corner-shape: squircle. O raio determina a região em que o canto muda de direção. A segunda propriedade determina o contorno dentro dessa região. Quando o navegador ignora a segunda declaração, o cartão continua arredondado. Use essa diferença para dar personalidade a uma família de cartões sem depender da curva para explicar como a interface funciona.
Que curva combina com o conteúdo do cartão?
Comece com uma captura de uma página real. Duplique um cartão e compare as versões com o mesmo tamanho, fundo e raio. A curva round segue um quarto de elipse, enquanto squircle fica mais próxima do canto quadrado. Num catálogo com fotos de objetos retangulares, isso pode ajudar a aproximar o contorno do cartão da geometria dos produtos. Num painel cheio de botões pequenos, o mesmo tratamento talvez apareça melhor na superfície que agrupa os controles do que em cada botão.
Inclua na comparação um cartão vazio, um com uma frase curta e outro com o maior título que cabe no componente. O fundo uniforme do cartão vazio facilita ver onde a curva começa. O título longo mostra se os cantos acabam competindo com as primeiras letras. Observe também a grade inteira. Uma pequena irregularidade que passa despercebida numa amostra isolada pode ficar evidente quando três ou quatro cartões se repetem na horizontal.
Como escolher o raio inicial?
Experimente começar com border-radius: 24px no cartão e deixe a curva padrão funcionar antes de acrescentar corner-shape: squircle. Vinte e quatro pixels são um valor de teste para um cartão que ocupa algumas centenas de pixels de largura. Abra a mesma página na largura mais estreita prevista. Se o cartão ocupar quase toda a tela e o título ficar próximo das curvas, ajuste o preenchimento interno e só então volte a comparar os raios. O preenchimento precisa acomodar também os textos que ganham uma linha.
Crie uma amostra com três raios em sequência e coloque o nome da variante fora do cartão. Assim o rótulo da amostra não altera o espaço disponível dentro dela. Se as diferenças quase desaparecem na escala de uso, registre um único raio para a família. O rascunho do módulo de bordas do W3C descreve as curvas e mostra por que a forma não aparece quando o raio vale zero.
Como encaixar uma foto na moldura?
Se a foto toca a borda do cartão, teste a imagem dentro de uma moldura com o recorte de overflow e aplique a forma nessa moldura. Ela pode ocupar só a área superior, com cantos inferiores retos, enquanto o conteúdo textual fica num bloco separado. Esse arranjo permite que uma linha de foco aplicada a um link abaixo da imagem apareça por inteiro. Num cartão que funciona como um único link, faça a moldura da imagem ficar dentro do link e revise o contorno de foco do próprio link.
Quando existe um espaço entre a imagem e a borda, desenhe o canto da foto como um elemento independente. Num cartão com raio de 24 pixels e imagem recuada em 8 pixels, vale testar um raio interno de 16 pixels como ponto de partida. Veja se a faixa entre as duas curvas parece uniforme na escala real. Faça a prova com uma foto muito escura e outra quase branca. O encontro do fundo com uma foto de contraste alto revela mudanças de espessura que passam despercebidas com uma foto de tom intermediário.
Quando vale mudar só um canto?
Reserve o corte de um canto para uma intenção que sobreviva na grade inteira. Um cartão de destaque pode receber um chanfro no canto superior direito para ecoar uma assinatura gráfica usada em outras peças da marca. A família de cartões comuns pode seguir com a mesma curva nos quatro cantos. Para um tratamento assimétrico, a declaração corner-shape: round bevel round round segue a ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Experimente a variante com o marcador de destaque na linha do título, longe da diagonal. Se o marcador só cabe quando se sobrepõe ao chanfro, aumente o espaço interno ou mova o marcador para uma posição repetível em todos os cartões. Quando o texto realmente identifica uma edição especial, mantenha essa identificação por escrito. O cartão continua compreensível quando a página aparece com a curva convencional ou quando alguém consulta o conteúdo numa apresentação que reproduz só a estrutura e o texto.
O que revisar em bordas, sombras e foco?
Confira a borda em cima de um fundo claro e de um fundo escuro. Se a borda muda de cor ou de espessura entre lados, examine os encontros nos quatro cantos. A equipe do Chrome descreve como o Blink calcula curvas, bordas e sombras e mostra por que um encontro assimétrico merece uma revisão própria. Faça uma captura na escala de uso e outra ampliada. A primeira revela o efeito percebido, enquanto a segunda ajuda a localizar uma junção que precisa de correção.
Percorra a grade com Tab. Quando o foco cair no primeiro cartão junto à borda da tela, veja se a linha fica inteira. Repita no último cartão de uma fileira e num cartão com uma imagem que toca o limite do componente. Se o contorno ficar escondido, procure o ancestral que recorta a região antes de trocar a cor do indicador. Vale repetir a navegação numa grade responsiva com a ordem de foco revisada, especialmente se o destaque editorial muda de posição quando as colunas diminuem.
Como aprovar a variante para uso no site?
Desative a declaração de forma nas ferramentas do navegador e percorra a mesma grade de novo. Compare largura dos títulos, posição dos links, recorte de imagem, bordas e foco. Abra também um navegador da sua matriz de suporte que ignore a propriedade. Quando a arte de uma campanha depende de uma silhueta exata, avalie a composição dessa arte separadamente. O guia de recorte responsivo com CSS shape() mostra como trabalhar uma silhueta dentro da área reservada à imagem.
Registre dois exemplos aprovados no catálogo de componentes. Um deles pode mostrar o cartão básico sobre fundo claro, com título em duas linhas e foto de alto contraste. O outro pode mostrar o estado de foco sobre o fundo mais escuro disponível no site. Anote o raio, o preenchimento, os cantos que recebem o tratamento e qual elemento recorta a foto. Essas informações permitem que outra pessoa reproduza o resultado sem medir a captura e sem aplicar recortes extras no contêiner que abriga as ações. Ao acrescentar uma variante, repita as duas capturas na largura estreita antes de incorporá-la ao restante da grade.
Na documentação, mostre também um erro recorrente em que o raio do cartão aparece na moldura externa, mas o recorte está numa camada interna de tamanho diferente. Ao lado da imagem, identifique as duas caixas e marque onde começam suas bordas. Esse exemplo ajuda quem mantém o site a encontrar o seletor responsável quando uma foto ultrapassa o canto. Se houver cartões sem foto, confira se o espaço reservado ao título permanece coerente com os demais. Um componente só precisa de variantes para as diferenças que o conteúdo realmente exige. Confira ainda o resultado sobre a cor de fundo usada na listagem de busca.