Talento Modelli CSS

Modelli CSS per griglie di profili e schede di artisti

Spaziatura, proporzioni delle immagini e stile visivo determinano se un elenco di artisti appare come un insieme coerente o come una serie di profili disomogenei. I modelli CSS per artisti includono già queste regole, lasciando liberi i valori da personalizzare. Una griglia di tre colonne di schede di artisti sembra convincente in una demo, finché una scheda non presenta un lungo elenco di crediti e la successiva solo due righe.

Stile per schede con contenuti non uniformi

Nessun profilo di artista ha lo stesso peso, e lo stile deve comunque far sì che l'elenco appaia come un insieme coerente. Quattro regole svolgono la maggior parte di questo lavoro:

• Proporzioni fisse per l'immagine del ritratto. I ritratti verticali in studio e le foto più ampie occupano lo stesso spazio, e il ritaglio rimane prevedibile lungo la pagina.

• Una scala tipografica che ordina le schede. Il nome dell'artista si trova in alto, il ruolo o la specializzazione un gradino sotto, e la riga dei crediti ancora più discreta.

• Spaziatura che si adatta alla densità delle immagini. La larghezza delle schede, gli spazi della griglia e la spaziatura interna mantengono unita una riga quando un profilo è troppo lungo, e un limite di riga per la biografia impedisce che una scheda troppo lunga estenda tutto ciò che la circonda.

• Stati al passaggio del mouse e al focus. Una scheda in evidenza deve solitamente avere un aspetto diverso rispetto alla riga in cui si trova.

Punti di interruzione ed eccezioni locali

Il numero di colonne è la parte più semplice del lavoro responsive: quattro colonne per lato su uno schermo largo, due su un tablet, una su uno smartphone. Ciò che il layout stretto mantiene in alto è più importante, quindi il ritratto, il nome e l'azione di contatto vanno posizionati sopra un lungo elenco di crediti, con un rapporto immagine più basso e spazi più stretti sui dispositivi mobili.

Nicepage gestisce questo aspetto con le modalità responsive, dagli schermi grandi fino agli smartphone verticali, e con il codice CSS personalizzato che si applica a un singolo elemento, a una singola pagina o all'intero sito. L'opzione "Esporta CSS minimo per pagina" mantiene il foglio di stile pubblicato ridotto alle regole effettivamente utilizzate da una pagina.

Il CSS determina l'aspetto dell'elenco quando un utente lo scorre. Prima di confermare, prova un modello con la sua densità massima, utilizzando l'elenco dei crediti più lungo che pubblichi e l'ampiezza di ritaglio più ampia disponibile nella tua libreria. Se la griglia risulta ancora leggibile in queste condizioni, manterrà la sua forma anche con l'aumentare del numero di titoli.