Estante Modelos CSS

Modelos CSS de Estante para Coleções de Livros Alinhadas

Uma estante de capas só fica organizada quando o estilo a mantém coesa. Scans de livros de capa dura, fotos de livros de bolso e edições antigas nunca têm o mesmo tamanho, e um modelo de estante precisa mantê-los em um único quadro, garantindo que os títulos e nomes dos autores permaneçam legíveis abaixo.

Capas com Proporções Desiguais

As imagens dos livros raramente compartilham a mesma proporção. Uma reimpressão pode ser achatada, um livro de arte quase quadrado, um clássico digitalizado cortado na parte superior. Tamanhos iguais de cartões não resultam em capas iguais, e essa diferença é o que deixa a estante com aparência desorganizada. Uma "proporção" fixa na área da capa, com uma regra de "ajuste de objeto" que permite que a imagem a preencha, mantém todos os cartões na mesma altura e corta a arte nas bordas em vez de esticá-la.

Títulos longos criam o outro desalinhamento. Duas linhas de texto sob uma capa e quatro sob a seguinte empurram os nomes dos autores para alturas diferentes ao longo da linha.

Algumas decisões de estilo são cruciais para a aparência de uma coleção de livros:

• uma proporção fixa para a área da capa, de forma que uma reimpressão mais baixa e um livro de arte mais alto ocupem o mesmo espaço;

• um limite de linhas para os títulos, mantendo a linha do autor com a mesma altura em cada ficha;

• espaços generosos entre os grupos, para que lançamentos e recomendações da equipe pareçam prateleiras separadas;

• um efeito de foco que revela uma classificação ou uma linha de sinopse.

O Nicepage gerencia a maior parte disso em seus controles visuais, e o elemento Grade define as colunas e os espaços.

Colunas da Grade Diminuem em Telas Estreitas

Uma tela ampla acomoda confortavelmente uma longa fileira de capas. A mesma fileira em um celular geralmente se reduz a uma ou duas colunas, e o que acontece entre esses extremos vale a pena verificar em cada Modo Responsivo.

Mantenha a capa, o título e o autor legíveis em todas as larguras. Rótulos de gênero e notas de edição podem diminuir em telas pequenas, já que um leitor que examina uma prateleira em um celular olha primeiro para a arte. Uma biblioteca pessoal comporta uma densidade maior do que a seleção de uma livraria, onde cada capa também é um produto.

Regras Personalizadas para uma Única Estante

Às vezes, um grupo precisa do que os controles padrão não oferecem, como um contorno dourado para livros premiados. O Nicepage oferece suporte a Controles CSS Personalizados para um único elemento, uma única página ou todo o site, o que abrange essas exceções.

Avaliar um modelo pela sua estante mais cheia revela mais do que a tela inicial de demonstração. Carregue-o com o seu título mais longo, a sua pior digitalização de capa e o maior grupo que você publica e veja se as linhas ainda se alinham.