Ritratto Modelli CSS

Modelli CSS flessibili per ritratti

I modelli CSS per ritratti di questa categoria sono punti di partenza stilizzati che puoi adattare alle tue fotografie o ai tuoi dipinti. La differenza tra un aspetto chiaro e uno scuro risiede principalmente negli sfondi, nei colori del testo e nei bordi. Un tema scuro non dovrebbe mai inghiottire i contorni di capelli neri o di una giacca scura, e una scheda leggermente più chiara spesso risolve il problema. Scegli il modello la cui tavolozza, le cui schede e le cui didascalie richiedono il minor numero di modifiche.

Adattare lo stile a ciascun supporto

Quando due demo sembrano ugualmente valide, confrontale su questi punti:

1. Tonalità dello sfondo, poiché il bianco puro, il grigio caldo e gli sfondi neutri valorizzano la pelle chiara in modo diverso.
2. Bordi e ombre, poiché un bordo sottile valorizza un ritratto su tela, mentre i ritratti fotografici documentari raramente necessitano di effetti.
3. Contrasto delle didascalie, compreso lo stato di passaggio del mouse (hover) quando una didascalia funge anche da link.
4. Spaziatura, in cui lo spazio vuoto tiene separati i ritratti e il padding della scheda tiene le didascalie lontane dal bordo della scheda.

I ritratti monocromatici risultano più puliti con decorazioni minime, bordi coordinati e spaziatura uniforme. I ritratti di moda possono sopportare blocchi di colore più decisi, a patto che il contrasto e la dimensione dei titoli funzionino anche sugli schermi più piccoli. Per i disegni a carboncino, mantieni le tonalità dello sfondo e dei bordi più discrete rispetto ai grigi chiari della carta e lascia intatto il disegno stesso.

Personalizzare i modelli in Nicepage

Le modifiche procedono di solito dalle impostazioni globali verso il codice:

1. I Colori del tema modificano insieme sfondi, testo e controlli, consentendo a uno studio di ricolorare ogni scheda ritratto in una sola volta, mentre le foto restano come sono state scattate. I colori impostati sui singoli elementi possono rimanere invariati.
2. L'editor visuale gestisce dimensioni dei caratteri e spaziature ordinarie senza alcun codice.
3. Il CSS personalizzato gestisce le eccezioni come gli stati hover o una classe che incornicia i dipinti finiti lasciando spoglie le foto di lavorazione.

La documentazione sul CSS personalizzato di Nicepage spiega dove si applicano tali regole. Limita l'ambito di ogni regola a una classe o a un blocco, poiché una regola scritta per ogni immagine corrisponderà anche a loghi e immagini decorative. Controlla il risultato nell'anteprima, poiché il codice personalizzato non viene eseguito all'interno dell'editor.

CSS reattivo per schermi stretti

Le schede ritratto ripetute si basano spesso su CSS Grid, con Flexbox che allinea le didascalie sottostanti. Laddove i controlli dell'editor si fermano, le media query possono modificare colonne e spaziature per ciascuna larghezza. Prova una figura dipinta slanciata, un primo piano quadrato e un ritratto di gruppo largo. Ogni scheda preserva le proporzioni naturali dell'immagine oppure la ritaglia in una cornice fissa, con l'"adattamento dell'oggetto" e la "posizione dell'oggetto" a determinare quale parte rimane visibile. Impostali in modo che il ritaglio non tagli mai un viso o le mani. Un buon modello di partenza consente alle stesse regole per schede, didascalie e spaziature di coprire l'intera galleria con pochissime sostituzioni.