Zeichnung CSS-Vorlagen

Anpassbare Zeichnungs-CSS-Vorlagen für einheitliches Artwork-Styling

Galerien mit Zeichnungen brechen oft auf vertraute Weise um. Eine hohe Figurenstudie dehnt ihre Zeile und verschiebt benachbarte Elemente, Bildunterschriften stehen auf unterschiedlichen Höhen über den Karten, und eine breite Tuschzeichnung hinterlässt auf einem Laptop eine unschöne Lücke. Zeichnungs-CSS-Vorlagen enthalten diese Entscheidungen bereits: Abstände, Typografie der Bildunterschriften und Grid-Verhalten, sobald der Bildschirm schmaler wird.

Spaltenbreiten, Abstände, Bildseitenverhältnisse

Das Erscheinungsbild einer Galerie hängt größtenteils von wenigen Eigenschaften ab, und es lohnt sich zu sehen, wie sie festgelegt werden:

1. Grid oder Flexbox für die Galerie, wobei gap den Abstand hält, anstatt Margins für jede Karte zu nutzen;
2. Ein festes Seitenverhältnis für die Medienbox, damit die Zeilen unabhängig von den Maßen der Scandatei bündig bleiben;
3. object-fit: cover für einheitliche Vorschaubilder, object-fit: contain, wenn die gesamte Zeichnung erhalten bleiben muss;
4. Gleichmäßige Abstände unter dem Bild für Angaben zu Technik und Entstehungsjahr, was verhindert, dass Bildunterschriften die Kartenhöhe verändern.

Der heikle Fall ist eine lange vertikale Figurenstudie direkt neben einer quadratischen Nahaufnahme desselben Motivs. Mit cover werden die Beine abgeschnitten; mit contain bleibt die Zeichnung vollständig, hinterlässt aber leere Streifen an beiden Seiten. Ein Styling, das die Höhe der Medienbox begrenzt und das Bild innerhalb eines festen Seitenverhältnisses zentriert, bewältigt beides ohne separate Regel pro Kunstwerk.

Schmale Bildschirme ohne fehlerhafte Vorschaubilder

Auf kleinen Displays verliert eine Galerie für Zeichnungen am meisten, da eine detaillierte Studie in einer schmalen Spalte die Linienführung, für die sie geschaffen wurde, kaum noch zeigen kann. Responsive Modi in Nicepage zeigen jede Breite einzeln, und drei Punkte verdienen dabei besondere Aufmerksamkeit:

1. Ob Vorschaubilder bei der kleinsten Breite lesbar und breit genug bleiben, anstatt zusätzliche Spalten beizubehalten;
2. Ob Bildunterschriften unter das Bild umbrechen und ihren Abstand wahren, wenn ein Titel länger ausfällt;
3. Was das Hover-Verhalten bei Touch-Bedienung ersetzt, da Vorschauzustände und Links zu Detailansichten eine entsprechende Fokus-Alternative benötigen.

Lokale Überschreibungen, wenn Standardvorgaben nicht ausreichen

Nicepage Custom CSS Code deckt ab, was vordefinierte Stile aussparen. Die Dokumentation zu individuellem CSS zeigt, wie eine Regel an ein einzelnes Element angehängt oder auf die gesamte Website angewendet werden kann: ein kräftigerer Rahmen um Kohlezeichnungen, ein abweichender Versatz der Bildunterschrift bei einer bestimmten Serie und ein wärmerer Hintergrund hinter Sepia-Tinte.

Eingescannter Graphit wirkt wärmer als digitale Linienkunst; ein Hintergrund, der dem einen schmeichelt, kann das andere stumpf wirken lassen – und genau dort entsteht meist die erste Überschreibung. Bevor Sie sich für eine Vorlage entscheiden, laden Sie zwei Zeichnungen, die im Kontrast zueinander stehen – eine breite Kohlelandschaft und eine hohe Porträtstudie –, und beobachten Sie, wie das Styling auf beide wirkt.