Portret CSS-sjablonen

Flexibele portret-CSS-templates

Portret-CSS-templates in deze categorie zijn vormgegeven uitgangspunten die u kunt aanpassen aan uw eigen foto's of schilderijen. Het verschil tussen een lichte en donkere uitstraling komt vooral neer op achtergronden, tekstkleuren en kaders. Een donker thema mag nooit de omtrek van zwart haar of een donkere jas laten verdwijnen, en een iets lichtere kaart lost dat vaak op. Kies het template waarvan het kleurenpalet, de kaarten en de bijschriften de minste aanpassingen vereisen.

Stem stijl af op elk medium

Wanneer twee demo's er even goed uitzien, vergelijk ze dan op deze punten:

1. Achtergrondtint, aangezien zuiver wit, warm grijs en neutrale achtergronden een lichte huid telkens anders weergeven.
2. Kaders en schaduwen, omdat een dun kader flatteert bij een portret op canvas, terwijl documentaire portretfoto's zelden enig effect nodig hebben.
3. Contrast van bijschriften, inclusief de hover-status wanneer een bijschrift tevens als link functioneert.
4. Tussenruimte, waarbij de tussenruimte portretten gescheiden houdt en kaartpadding bijschriften van de rand van de kaart weghoudt.

Monochrome portretten ogen het strakst met minimale versiering, bijpassende kaders en consistente tussenruimtes. Modeportretten kunnen fellere kleurblokken verdragen, zolang het contrast en de kopgrootte ook op kleinere schermen goed blijven werken. Houd bij houtskooltekeningen de achtergrond- en kadertinten rustiger dan de lichte grijstinten van het papier en laat de tekening zelf onaangetast.

Templates aanpassen in Nicepage

Aanpassingen verlopen doorgaans van globale instellingen richting code:

1. Themakleuren passen achtergronden, tekst en bedieningselementen tegelijkertijd aan, zodat een studio elke portretkaart in één keer van een nieuwe kleur kan voorzien terwijl de foto's blijven zoals ze zijn gemaakt. Kleuren die op afzonderlijke elementen zijn ingesteld, kunnen ongewijzigd blijven.
2. De visuele editor dekt lettergroottes en gewone tussenruimtes zonder enige code af.
3. Aangepaste CSS verwerkt uitzonderingen zoals hover-statussen of een class die voltooide schilderijen van een kader voorziet en procesfoto's sober laat.

De documentatie over aangepaste CSS van Nicepage legt uit waar dergelijke regels van toepassing zijn. Beperk elke regel tot een class of blok, aangezien een regel die voor elke afbeelding is geschreven ook van toepassing is op logo's en decoratieve afbeeldingen. Controleer het resultaat in de preview, omdat aangepaste code niet binnen de editor wordt uitgevoerd.

Responsieve CSS voor smalle schermen

Herhalende portretkaarten vertrouwen vaak op CSS Grid, waarbij Flexbox de bijschriften eronder uitlijnt. Waar de eigen bedieningselementen van de editor ophouden, kunnen media queries kolommen en tussenruimtes bij elke breedte aanpassen. Test een lange geschilderde figuur, een vierkante portretfoto en een breed groepsportret. Elke kaart behoudt de natuurlijke verhoudingen van een afbeelding of snijdt deze bij naar een vast kader, waarbij 'objectaanpassing' en 'objectpositie' bepalen welk deel zichtbaar blijft. Stel deze zo in dat de uitsnede nooit door een gezicht of handen snijdt. Een goed starttemplate zorgt ervoor dat dezelfde kaart-, bijschrift- en tussenruimteregels de hele galerij dekken met minimale overschrijvingen.