Bücherregal CSS-Vorlagen

Bücherregal-CSS-Vorlagen für Buchsammlungen, die bündig bleiben

Ein Regal voller Buchdeckel wirkt nur dann ordentlich, wenn das Styling alles zusammenhält. Scans von Hardcovern, Fotos von Taschenbüchern und alte Ausgaben haben nie dieselbe Größe, und eine Bücherregal-Vorlage muss sie in einem einheitlichen Raster halten, während Titel und Autorennamen darunter gut lesbar bleiben.

Cover-Bilder haben ungleiche Proportionen

Buchabbildungen besitzen selten dasselbe Seitenverhältnis. Ein Nachdruck kann gedrungen sein, ein Bildband fast quadratisch und ein gescannter Klassiker oben beschnitten. Einheitliche Kartengrößen führen nicht automatisch zu gleich großen Buchcovern, und genau dieser Unterschied lässt ein Regal unordentlich wirken. Ein festes „Seitenverhältnis“ (aspect-ratio) für den Cover-Bereich in Kombination mit einer Regel für das „Einpassen des Inhalts“ (object-fit), die das Bild diesen Bereich füllen lässt, hält jede Karte auf derselben Höhe und beschneidet das Bild an den Kanten, anstatt es zu verzerren.

Lange Titel verursachen eine weitere Unregelmäßigkeit. Zwei Textzeilen unter einem Cover und vier unter dem nächsten verschieben die Autorennamen innerhalb derselben Reihe auf unterschiedliche Höhen.

Einige wenige Styling-Entscheidungen tragen die meiste visuelle Verantwortung bei einer Buchsammlung:

• ein festes Seitenverhältnis für den Cover-Bereich, damit ein gedrungener Nachdruck und ein hoher Bildband denselben Platz einnehmen;
• eine Zeilenbegrenzung bei Titeln, die die Autorenzeile auf jeder Karte auf gleicher Höhe hält;
• großzügige Abstände zwischen Gruppen, sodass Neuerscheinungen und Empfehlungen des Teams als getrennte Regale wahrgenommen werden;
• ein Hover-Zustand, der eine Bewertung oder eine einzeilige Zusammenfassung einblendet.

Nicepage übernimmt den Großteil davon über seine visuellen Steuerelemente, und das Raster-Element legt Spalten und Abstände fest.

Rasterspalten verkleinern sich auf schmalen Bildschirmen

Ein breiter Bildschirm nimmt eine lange Reihe von Covern mühelos auf. Dieselbe Reihe schrumpft auf einem Smartphone meist auf ein oder zwei Spalten zusammen, und was zwischen diesen Extremen geschieht, sollte in jedem responsiven Modus überprüft werden.

Sorgen Sie dafür, dass Cover, Titel und Autor bei jeder Bildschirmbreite lesbar bleiben. Genre-Kennzeichnungen und Notizen zur Ausgabe können auf kleinen Bildschirmen verkleinert werden, da ein Leser, der ein Regal auf dem Smartphone überfliegt, zuerst auf die Titelgrafik schaut. Eine persönliche Bibliothek verträgt eine höhere Dichte als das Sortiment einer Buchhandlung, in der jedes Cover zugleich ein Produkt ist.

Benutzerdefinierte Regeln für ein einzelnes Regal

Manchmal benötigt eine Gruppe Optionen, die Standard-Bedienelemente nicht bieten, wie etwa eine goldene Umrandung für Preisträger. Nicepage unterstützt benutzerdefinierte CSS-Steuerelemente für ein einzelnes Element, eine einzelne Seite oder die gesamte Website, womit sich solche Ausnahmen abdecken lassen.

Eine Vorlage nach ihrem am dichtesten belegten Regal zu beurteilen, verrät mehr als die Startseite der Demo. Füllen Sie sie mit Ihrem längsten Titel, Ihrem schlechtesten Cover-Scan und der größten Gruppe, die Sie veröffentlichen, und prüfen Sie dann, ob die Zeilen noch immer bündig ausgerichtet sind.