Talento Modelos CSS

Modelos CSS para Grades de Carreiras e Cartões de Perfil de Talentos

O espaçamento, as proporções das imagens e os estados visuais determinam se uma lista de artistas é percebida como um conjunto único de cartões ou como uma pilha de perfis desconexos. Os modelos CSS para talentos já vêm com essas regras definidas, deixando os valores em aberto. Uma grade de cartões de artistas com três colunas parece convincente em uma demonstração, até que um cartão tenha uma longa lista de créditos e o próximo tenha apenas duas linhas.

Estilizando Cartões com Conteúdo Desigual

Não existem dois perfis de artistas com o mesmo peso, e o estilo precisa fazer com que a lista seja percebida como um conjunto único. Quatro regras são responsáveis pela maior parte desse trabalho:

• Uma proporção de imagem fixa na área da foto de rosto. Retratos verticais de estúdio e fotos mais amplas preenchem o mesmo espaço, e o recorte permanece previsível ao longo da página.

• Uma escala tipográfica que classifica o cartão. O nome do artista fica no topo, o papel ou especialidade um nível abaixo, e a linha de créditos ainda mais discreta.

• Espaçamento que se adapta à densidade de texto. A largura dos cartões, os espaçamentos da grade e o preenchimento interno mantêm uma linha coesa quando um perfil é muito longo, e um limite de linhas na biografia impede que um cartão com muitas informações ocupe todo o espaço ao lado.

• Estados de foco e de passar o mouse. Um cartão em destaque geralmente precisa ter uma aparência diferente da linha em que está inserido.

Pontos de interrupção e exceções locais

A contagem de colunas é a metade fácil do trabalho responsivo: quatro na horizontal em uma tela ampla, duas em um tablet e uma em um celular. O que o layout estreito mantém no topo é mais importante, portanto, o retrato, o nome e a ação de contato devem ficar acima de uma longa lista de créditos, com uma proporção de imagem menor e espaçamentos mais estreitos em dispositivos móveis.

O Nicepage resolve isso com Modos Responsivos, desde telas grandes até celulares verticais, e com Código CSS Personalizado que se aplica a um único elemento, uma única página ou a todo o site. A opção Exportar CSS Mínimo por Página mantém a folha de estilo publicada de acordo com as regras que uma página realmente usa.

O CSS determina a aparência da lista conforme o usuário rola a página. Experimente um modelo com a maior densidade possível antes de confirmá-lo, usando a lista de créditos mais longa que você publicar e o recorte mais amplo da sua biblioteca. Se a grade ainda estiver legível nesse formato, ela se manterá à medida que a lista de autores crescer.