Estante Para Libros Plantillas CSS

Plantillas CSS para estanterías de libros con alineación perfecta

Una estantería de portadas luce ordenada solo cuando el estilo la mantiene unificada. Los escaneos de tapa dura, las fotos de libros de bolsillo y las ediciones antiguas nunca tienen el mismo tamaño, y una plantilla de estantería debe mantenerlas dentro de un mismo marco, a la vez que conserva la legibilidad de los títulos y los nombres de los autores.

Portadas con proporciones desiguales

Las imágenes de los libros rara vez comparten una proporción. Una reimpresión puede ser achatada, un volumen de arte casi cuadrado, y un clásico escaneado recortado en la parte superior. El mismo tamaño de tarjeta no implica portadas iguales, y esa diferencia es lo que hace que la estantería se vea desordenada. Una "relación de aspecto" fija en el área de la portada, con una regla de "ajuste al objeto" que permite que la imagen la llene, mantiene todas las tarjetas a la misma altura y recorta la ilustración en los bordes en lugar de estirarla.

Los títulos largos crean otra desalineación. Dos líneas de texto debajo de una portada y cuatro debajo de la siguiente hacen que los nombres de los autores tengan diferentes alturas a lo largo de la fila.

Unas pocas decisiones de estilo determinan la mayor parte del impacto visual de una colección de libros:

• Una proporción fija para la portada, de modo que una reimpresión compacta y un volumen de arte alto ocupen el mismo espacio;

• Un límite de líneas en los títulos, que mantiene la línea del autor a la misma altura en cada ficha;

• Espacios amplios entre grupos, de modo que los nuevos lanzamientos y las selecciones del personal se leen como estantes separados;

• Un estado al pasar el cursor que muestra una calificación o una línea de sinopsis.

Nicepage gestiona la mayor parte de esto con sus controles visuales, y el elemento Cuadrícula establece las columnas y los espacios.

Las columnas de la cuadrícula se reducen en pantallas estrechas

Una pantalla ancha permite mostrar cómodamente una fila larga de portadas. La misma fila en un teléfono suele reducirse a una o dos columnas, y conviene comprobar qué sucede entre estos extremos en cada modo adaptable.

Mantén la portada, el título y el autor legibles en cualquier ancho. Las etiquetas de género y las notas de edición pueden reducirse en pantallas pequeñas, ya que un lector que consulta una estantería en un teléfono mira primero la ilustración. Una biblioteca personal puede permitirse una mayor densidad de imágenes que la selección de una librería, donde cada portada es también un producto.

Reglas personalizadas para una sola estantería

A veces, un grupo necesita funciones que los controles estándar no ofrecen, como un contorno dorado para los ganadores de premios. Nicepage admite controles CSS personalizados para un solo elemento, una sola página o todo el sitio, lo que cubre estas excepciones.

Evaluar una plantilla por su estantería más concurrida ofrece más información que la pantalla de inicio de demostración. Cárgala con tu título más largo, la peor imagen de portada y el grupo más grande que publiques, y comprueba si las filas siguen alineadas.