Talento Modelos CSS

Modelos CSS para talentos para grades de elenco e cartões de perfil

Espaçamento, proporções de imagem e estados visuais determinam se uma listagem é visualizada como um conjunto coeso de cartões ou como uma pilha desconexa de perfis. Os modelos CSS para talentos já trazem essas regras definidas, deixando os valores livres para ajuste. Uma grade de três colunas de cartões de artistas parece convincente em uma demonstração, até que um cartão apresente uma lista extensa de créditos e o seguinte tenha apenas duas linhas.

Estilizando cartões com conteúdo desigual

Nenhum perfil de talento tem o mesmo volume de informações, e o estilo visual precisa fazer com que o elenco pareça um conjunto harmonioso de qualquer forma. Quatro regras sustentam a maior parte desse trabalho:

• Uma proporção fixa de imagem na área do retrato. Retratos verticais de estúdio e fotos de cena mais amplas preenchem o mesmo espaço, mantendo o enquadramento previsível por toda a página.
• Uma escala tipográfica que hierarquiza o cartão. O nome do artista fica no topo, a função ou especialidade um nível abaixo e a linha de créditos com destaque ainda mais suave.
• Espaçamento que resiste à densidade. Larguras de cartão, espaçamentos da grade e preenchimento interno mantêm uma linha alinhada quando um perfil é extenso, e um limite de linhas na biografia impede que um cartão com texto longo estique os cartões vizinhos.
• Estados de hover e foco. Um cartão em destaque geralmente precisa ter uma aparência distinta da linha em que está inserido.

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

O número de colunas é a parte mais simples do trabalho responsivo: quatro lado a lado em uma tela ampla, duas em um tablet, uma em um celular. O que o layout estreito mantém no topo é muito mais importante: o retrato, o nome e a ação de contato devem ficar acima de uma longa lista de créditos, acompanhados de uma proporção de imagem mais compacta e espaçamentos mais estreitos no celular.

O Nicepage atende a isso com Responsive Modes, de telas grandes a celulares na vertical, e com Custom CSS Code aplicável a um único elemento, a uma página individual ou a todo o site. A opção Export Minimal CSS Per Page restringe a folha de estilo publicada apenas às regras que a página realmente utiliza.

O CSS define como a lista de talentos se comporta enquanto o usuário rola a página. Experimente um modelo em seu estado mais denso antes de bater o martelo, utilizando a lista de créditos mais longa que você publica e o enquadramento mais aberto da sua galeria. Se a grade continuar nítida e organizada sob essas condições, ela se manterá sólida à medida que o elenco crescer.