Estante Modelos CSS

Modelos CSS de estante para coleções de livros que permanecem alinhadas

Uma estante de capas só parece ordenada quando o estilo visual a mantém uniforme. Digitalizações de capas duras, fotos de livros de bolso e edições antigas nunca têm o mesmo tamanho, e um modelo de estante precisa de reuni-los num enquadramento uniforme, mantendo títulos e nomes de autores legíveis por baixo.

As ilustrações de capa chegam com proporções desiguais

As imagens de livros raramente partilham a mesma proporção. Uma reimpressão pode ser atarracada, um volume de arte quase quadrado e um clássico digitalizado cortado no topo. Cartões com tamanhos iguais não garantem capas iguais, e essa disparidade é o que torna uma estante desalinhada. Uma «proporção de aspeto» (aspect-ratio) fixa na área da capa, acompanhada por uma regra de «ajuste de conteúdo» (object-fit) que permita à imagem preenchê-la, mantém cada cartão à mesma altura e apara a imagem nas extremidades em vez de a distorcer.

Títulos compridos causam o outro problema de alinhamento. Duas linhas de texto sob uma capa e quatro sob a seguinte empurram os nomes dos autores para alturas diferentes na mesma linha.

Algumas decisões de estilo sustentam a maior parte do equilíbrio visual de uma coleção de livros:

• uma proporção fixa para a área da capa, para que uma reimpressão baixa e um livro de arte alto ocupem o mesmo espaço;
• um limite de linhas nos títulos, o que mantém a linha do autor à mesma altura em todos os cartões;
• espaçamentos amplos entre grupos, para que novidades e destaques da equipa sejam vistos como estantes distintas;
• um estado de sobreposição de cursor (hover) que revela uma classificação ou uma linha de sinopse.

O Nicepage resolve a maioria destes aspetos nos seus controlos visuais, e o elemento Grelha define as colunas e os espaçamentos.

As colunas da grelha diminuem em ecrãs estreitos

Um ecrã largo acomoda confortavelmente uma longa fila de capas. A mesma fila num telemóvel costuma passar para uma ou duas colunas, e o que ocorre entre esses dois extremos merece ser revisto em cada modo responsivo.

Certifique-se de que a capa, o título e o autor continuam legíveis em todas as larguras. As etiquetas de género e as notas de edição podem diminuir em ecrãs pequenos, já que o leitor que percorre a estante no telemóvel repara primeiro na imagem. Uma biblioteca pessoal suporta uma densidade maior do que o catálogo de uma livraria, onde cada capa funciona também como produto.

Regras personalizadas para uma única estante

Por vezes, um grupo necessita de algo que os controlos padrão não disponibilizam, como um contorno dourado para obras premiadas. O Nicepage suporta controlos CSS personalizados para um único elemento, uma única página ou todo o site, abrangendo tais exceções.

Avaliar um modelo pela sua estante mais preenchida revela mais do que examinar a página inicial de demonstração. Teste-o com o título mais longo, a pior digitalização de capa e o maior grupo que publicar, e comprove depois se as linhas continuam alinhadas.