Categorieën

In tegenstelling tot een volledig portfolio-websitesjabloon, richt dit formaat zich op de vormgeving van de kunstwerken. Schetsen, voltooide tekeningen, bijschriften, afstand en afbeeldingsrasters blijven visueel op elkaar afgestemd, terwijl responsieve CSS-regels ervoor zorgen dat ze zich op verschillende schermformaten gedragen.

Soort:

Meer website- en HTML-sjablonen voor Tekening

Meer CSS-sjablonen uit de Kunst ontwerp categorie

andere Kunst ontwerp CSS-sjablonen

Aanpasbare CSS-sjablonen voor tekeningen voor een consistente vormgeving

Tekengalerijen vertonen herkenbare patronen. Een hoge figuurstudie rekt de rij uit en duwt de naastgelegen tekeningen uit de lijn, bijschriften staan op verschillende hoogtes op de kaarten en een brede inkttekening laat een onhandige lege ruimte achter op een laptop. CSS-sjablonen voor tekeningen hebben deze instellingen al vastgelegd: afstand, typografie van bijschriften en rastergedrag bij smallere schermen.

Kolombreedtes, tussenruimtes en beeldverhoudingen

Het uiterlijk van een galerij wordt grotendeels bepaald door een handvol eigenschappen, en het is de moeite waard om te bekijken hoe deze worden ingesteld:

Raster of Flexbox voor de galerij, waarbij de tussenruimte wordt bepaald door een tussenruimte in plaats van marges op elke kaart;
Een vaste beeldverhouding voor het mediavak, zodat rijen recht blijven, ongeacht de afmetingen van het gescande bestand;
object-fit: cover voor uniforme miniaturen, object-fit: contain wanneer de hele tekening zichtbaar moet blijven;
Constante afstand onder de afbeelding voor medium- en jaaraanduidingen, waardoor de hoogte van de bijschriften niet verandert.

Een lastig geval is een lange verticale figuurstudie naast een vierkante close-up van hetzelfde onderwerp. Bij 'cover' worden de benen afgesneden; bij 'contain' blijft de tekening behouden, maar blijven er lege stroken aan beide zijden over. Stijlen die de hoogte van het mediakader beperken en de afbeelding centreren binnen een vaste verhouding, lossen beide problemen op zonder een aparte regel per kunstwerk.

Smalle schermen zonder kapotte miniaturen

Kleine schermen zijn de plek waar een tekeningengalerij het meest verliest, omdat een gedetailleerde studie die in een smalle kolom is geperst, niet langer de lijnkwaliteit kan tonen waarvoor deze is gemaakt. Responsieve modi in Nicepage tonen elke breedte afzonderlijk, en drie dingen verdienen daarbij aandacht:

Of de voorbeelden breed genoeg blijven om te lezen op de kleinste breedte in plaats van extra kolommen te behouden;
Of bijschriften onder de afbeelding doorlopen en hun afstand behouden wanneer een titel lang is;
Wat de hover-functie bij aanraking vervangt, aangezien voorbeeldstatussen en links naar detailweergaven een focus-equivalent nodig hebben.

Lokale aanpassingen wanneer presets tekortschieten

Nicepage Aangepaste CSS-code dekt de tekortkomingen van de presetstijlen. De documentatie over aangepaste CSS laat zien hoe een regel aan een enkel element kan worden gekoppeld of op de hele site kan worden toegepast: een dikkere rand rond houtskoolscans, een afwijkende offset voor bijschriften in de ene serie, en een warmere achtergrond achter sepia-inkt.

Gescanneerd grafiet oogt warmer dan digitale lijntekeningen, dus een achtergrond die het ene flatteert, kan het andere doffer maken. Dat is meestal waar de eerste aanpassing nodig is. Voordat u een sjabloon kiest, laad twee tekeningen die met elkaar botsen, een breed houtskoollandschap en een hoge portretstudie, en kijk hoe de styling ze beïnvloedt.