Disegno Modelli CSS

Modelli CSS personalizzabili per disegni per uno stile coerente delle opere d'arte

Le gallerie di disegni presentano delle interruzioni riconoscibili. Uno studio di figura alto allunga la sua riga e sposta le immagini adiacenti fuori allineamento, le didascalie si trovano ad altezze diverse sulle schede e un ampio schizzo a inchiostro lascia uno spazio vuoto antiestetico su un laptop. I modelli CSS per i disegni includono già queste decisioni: spaziatura, tipografia delle didascalie e comportamento della griglia al restringersi dello schermo.

Larghezza delle colonne, spaziatura, proporzioni delle immagini

Gran parte dell'aspetto di una galleria dipende da alcune proprietà, ed è utile vedere come vengono impostate:

1. Griglia o Flexbox per la galleria, con lo spazio vuoto che definisce la spaziatura anziché i margini su ogni scheda;

2. Un rapporto d'aspetto fisso per il media box, in modo che le righe rimangano allineate indipendentemente dalle dimensioni del file scansionato;

3. object-fit: cover per miniature uniformi, object-fit: contain quando l'intero disegno deve essere visualizzato;

4. Spaziatura fissa sotto l'immagine per le etichette di tecnica e anno, che impedisce alle didascalie di modificare l'altezza della scheda.

Il caso problematico è quello di un lungo studio verticale di figura accanto a un primo piano quadrato dello stesso soggetto. Con la modalità "copertina", le gambe vengono tagliate; con la modalità "contenimento", il disegno rimane visibile ma lascia delle bande vuote su entrambi i lati. Uno stile che limita l'altezza del riquadro multimediale e centra l'immagine all'interno di un rapporto fisso gestisce entrambi i casi senza una regola separata per ogni opera.

Schermate strette senza miniature interrotte

Gli schermi piccoli sono il punto debole di una galleria di disegni, poiché uno studio dettagliato compresso in una colonna stretta non può più mostrare la qualità del tratto per cui è stato realizzato. Le modalità responsive di Nicepage mostrano ogni larghezza separatamente e tre aspetti meritano attenzione:

1. Se le anteprime rimangono sufficientemente larghe da essere leggibili anche alla larghezza minima, invece di mantenere colonne aggiuntive;

2. Se le didascalie vanno a capo sotto l'immagine e mantengono la loro spaziatura quando il titolo è lungo;

3. Cosa sostituisce l'effetto "hover on touch", dato che le anteprime e i link alle viste di dettaglio necessitano di un equivalente per l'effetto focus?

Sovrascritture locali quando i preset non sono sufficienti

Il CSS personalizzato di Nicepage copre ciò che gli stili predefiniti non includono. La documentazione CSS personalizzato mostra come una regola può essere applicata a un singolo elemento o all'intero sito: un bordo più spesso attorno alle scansioni a carboncino, un offset della didascalia diverso per una serie e uno sfondo più caldo dietro l'inchiostro seppia.

La grafite scansionata ha una tonalità più calda rispetto al disegno digitale, quindi uno sfondo che valorizza uno può smorzare l'altro, ed è solitamente qui che compare la prima sovrascrittura. Prima di scegliere un template, carica due disegni in conflitto tra loro, un paesaggio a carboncino di grandi dimensioni e uno studio di ritratto verticale, e osserva come lo stile li influenza.