Categorieën

In tegenstelling tot een complete portfoliositestemplate richt dit format zich op artworkstyling. Houd schetsen, voltooide tekeningen, bijschriften, tussenruimtes en afbeeldingsrasters visueel op elkaar afgestemd, terwijl responsieve CSS-regels hun weergave op verschillende schermformaten beheren.

Soort:

Meer website- en HTML-sjablonen voor Tekening

Meer CSS-sjablonen uit de Kunst ontwerp categorie

andere Kunst ontwerp CSS-sjablonen

Aanpasbare tekening-CSS-templates voor consistente artworkstyling

Galerijen met tekeningen lopen vaak op herkenbare manieren vast. Een hoge figuurstudie rekt de rij uit en drukt de omliggende elementen uit lijn, bijschriften staan op verschillende hoogtes op de kaarten en een brede inkttekening laat een ongemakkelijke leegte achter op een laptop. Tekening-CSS-templates lossen deze vraagstukken vooraf op: tussenruimtes, typografie van bijschriften en gridgedrag zodra het scherm smaller wordt.

Kolombreedtes, tussenruimtes, afbeeldingsverhoudingen

Het uiterlijk van een galerij wordt grotendeels bepaald door een handvol eigenschappen, en het is waardevol om te zien hoe deze worden ingesteld:

Grid of Flexbox voor de galerij, waarbij gap de tussenruimte bewaart in plaats van marges op elke kaart;
Een vaste aspectratio voor de mediabox, zodat rijen gelijk blijven ongeacht de afmetingen van het gescande bestand;
object-fit: cover voor uniforme miniaturen, object-fit: contain wanneer de hele tekening zichtbaar moet blijven;
Consistente tussenruimte onder de afbeelding voor labels met techniek en jaartal, wat voorkomt dat bijschriften de kaarthoogte beïnvloeden.

De lastige situatie is een lange verticale figuurstudie naast een vierkante close-up van hetzelfde onderwerp. Met cover worden de benen afgesneden; met contain blijft de tekening intact, maar ontstaan er lege balken aan weerszijden. Styling die de hoogte van het mediakader begrenst en de afbeelding binnen een vaste verhouding centreert, vangt beide op zonder een aparte regel per kunstwerk.

Smalle schermen zonder gebroken miniaturen

Op kleine schermen verliest een tekeningengalerij het meest, omdat een gedetailleerde studie samengeperst in een smalle kolom de lijnkwaliteit waarvoor hij gemaakt is niet meer kan tonen. Responsieve weergaven in Nicepage tonen elke breedte afzonderlijk, en drie zaken verdienen daarbij de aandacht:

Of voorvertoningen op de smalste breedte breed genoeg blijven om goed zichtbaar te zijn, in plaats van extra kolommen vast te houden;
Of bijschriften netjes onder de afbeelding doorlopen en hun tussenruimte behouden wanneer een titel langer is;
Wat de hover-status vervangt op touchscreens, aangezien preview-statussen en links naar detailweergaven een focus-equivalent nodig hebben.

Lokale overschrijvingen wanneer voorinstellingen tekortschieten

Nicepage Custom CSS Code vult aan wat de standaardstijlen niet bieden. De documentatie voor aangepaste CSS laat zien hoe een regel kan worden gekoppeld aan een afzonderlijk element of over de gehele site kan worden toegepast: een zwaardere rand rond houtskoolscans, een afwijkende afstand voor bijschriften bij één serie en een warmere achtergrond achter sepiainkt.

Gescand grafiet oogt warmer dan digitale lijnkunst, waardoor een achtergrond die het ene complimenteert, het andere dof kan maken. Dat is meestal waar de eerste overschrijving nodig is. Laad voordat u een definitieve template kiest twee tekeningen die met elkaar botsen – een breed houtskoollandschap en een hoge portretstudie – en bekijk hoe de styling ze beïnvloedt.