Zeichnung CSS-Vorlagen

Anpassbare CSS-Vorlagen für einheitliches Grafikdesign

Galerien mit Zeichnungen weisen oft unschöne Unregelmäßigkeiten auf. Eine hohe Aktstudie dehnt die Zeile aus und verschiebt die benachbarten Zeichnungen, Bildunterschriften haben unterschiedliche Höhen auf den einzelnen Karten, und eine breite Tuschezeichnung hinterlässt auf einem Laptop eine unschöne Lücke. Die CSS-Vorlagen für Zeichnungen berücksichtigen diese Aspekte bereits: Abstände, Typografie der Bildunterschriften und das Verhalten des Rasters bei schmaleren Bildschirmen.

Spaltenbreiten, Abstände, Bildverhältnisse

Das Aussehen einer Galerie hängt maßgeblich von wenigen Eigenschaften ab. Es lohnt sich, deren Einstellungen zu betrachten:

1. Grid oder Flexbox für die Galerie, wobei der Abstand (gap) anstelle von Rändern (margins) für jede Karte festgelegt wird;

2. Ein festes Seitenverhältnis für die Medienbox, damit die Zeilen unabhängig von der Größe der gescannten Datei waagerecht bleiben;

3. object-fit: cover für einheitliche Thumbnails, object-fit: contain für Bereiche, in denen die gesamte Zeichnung dargestellt werden muss;

4. Gleichmäßiger Abstand unter dem Bild für Medium- und Jahresangaben, damit die Bildunterschriften die Kartenhöhe nicht verändern.

Ein problematischer Fall ist eine lange, vertikale Aktstudie neben einer quadratischen Nahaufnahme desselben Motivs. Mit der Option „Überschlag“ werden die Beine abgeschnitten; mit der Option „Enthalten“ bleibt die Zeichnung zwar erhalten, es entstehen aber leere Bereiche an beiden Seiten. Eine Formatierung, die die Höhe der Medienbox begrenzt und das Bild in einem festen Seitenverhältnis zentriert, löst beide Probleme, ohne dass für jedes Kunstwerk eine separate Regel erforderlich ist.

Schmale Bildschirme ohne fehlerhafte Vorschaubilder

Auf kleinen Bildschirmen verliert eine Zeichnungsgalerie am meisten an Wirkung, da eine detaillierte Studie, die in eine schmale Spalte gezwängt wird, nicht mehr die Linienqualität zeigen kann, für die sie geschaffen wurde. Die responsiven Modi in Nicepage zeigen jede Breite einzeln an, und drei Punkte verdienen hier besondere Beachtung:

1. Bleiben die Vorschaubilder auch bei der kleinsten Breite breit genug, um gut lesbar zu sein, anstatt zusätzliche Spalten anzuzeigen?

2. Werden die Bildunterschriften unter dem Bild umgebrochen und behalten ihren Abstand bei, wenn ein Titel lang ist?

3. Was ersetzt den Hover-Effekt bei Berührung, da Vorschauzustände und Links zu Detailansichten ein entsprechendes Fokus-Äquivalent benötigen?

Lokale Anpassungen, wenn Voreinstellungen nicht ausreichen

Nicepage Benutzerdefinierter CSS-Code deckt ab, was die voreingestellten Stile nicht abdecken. Die Dokumentation zu benutzerdefiniertem CSS zeigt, wie eine Regel einem einzelnen Element zugewiesen oder auf die gesamte Website angewendet werden kann: ein dickerer Rahmen um Kohlezeichnungen, ein unterschiedlicher Versatz der Bildunterschriften in verschiedenen Serien und ein wärmerer Hintergrund hinter Sepia-Tinte.

Gescannte Graphitzeichnungen wirken wärmer als digitale Strichzeichnungen. Ein Hintergrund, der die eine Darstellungsform vorteilhaft betont, kann die andere abstumpfen. Genau hier kommt es meist zu den ersten Anpassungen. Bevor Sie sich für eine Vorlage entscheiden, laden Sie zwei Zeichnungen, die sich widersprechen – eine breite Kohlezeichnung einer Landschaft und eine hohe Porträtstudie – und beobachten Sie, wie sich die Formatierung auf sie auswirkt.