Chi non ama una buona lista? Li usiamo costantemente nel nostro markup per una varietà di situazioni diverse. Oggi daremo un'occhiata ad alcuni esempi semplici e pratici che puoi rubare e utilizzare nel tuo lavoro.
Iniziamo con una divertente lista verticale animata, quindi modifichiamo un elenco con miniature e testo, un altro con solo immagini e infine una lista ordinata in cui i numeri sono stilizzati in modo diverso rispetto al resto del testo. C'è un sacco di grandi cose da imparare qui, quindi saltiamo dentro!
HelvetiList
Per il nostro primo elenco, inizieremo con un design semplice, minimale ma super attraente che dipende fortemente dalla bellezza della tipografia. Useremo alcuni sottili stili di Helvetica e lanciamo un'animazione fluida al passaggio del mouse.
demo: Guarda la demo e il codice su CodePen.
HTML
Il nostro markup qui è semplicemente semplice. Crea un div (probabilmente vorrai una classe o un ID in un progetto live), quindi aggiungi un'intestazione e un elenco non ordinato con cinque voci di elenco.
CSS
Come abbiamo visto nello screenshot qui sopra, le voci dell'elenco usano caratteri molto sottili, separatori sottili e uno stato di hover che ingrandisce il font. Per iniziare, assegna una larghezza al div e imposta gli stili generici h2.
Quindi, applica un tipo di stile elenco di nessuno per eliminare i punti elenco e ripristinare i margini o il riempimento che potrebbero essere presenti. Per gli articoli dell'elenco effettivo, ho applicato un leggero bordo inferiore, che fornisce quel piccolo divisore. Ho usato il selettore ultimo figlio, ma non è un grosso problema se c'è un browser che non lo riconosce e decide di lanciare un bordo in più sul fondo.
Notate anche che entrambe le volte che ho impostato il font, ho usato la stenografia CSS e applicato pesi diversi. Per finire, ho applicato alcuni stili di collegamento e impostato la transizione per ingrandire il carattere e cambiare il colore di sfondo al passaggio del mouse.
Elenco delle miniature
Un formato veramente comune che vedrai per elenchi è la tua miniatura? setup, che è un ottimo modo per aggiungere un certo interesse visivo ad una lista di paragrafi altrimenti noiosa.
Questo è uno stile elenco estremamente versatile che è possibile utilizzare su qualsiasi numero di progetti. Vediamo come funziona.
demo: Guarda la demo e il codice su CodePen.
HTML
L'HTML su questo è un po 'più complicato. Ogni elemento della lista deve avere tre figli: un'immagine, un titolo e un paragrafo. Le immagini che sto usando sono 100px per 100px, quindi tienilo a mente se vuoi personalizzare questa dimensione. Nel complesso, questo è tutto un markup ancora molto semplice che non dovrebbe farti travolgere.
CSS
Qui abbiamo spostato i nostri elementi di elenco a sinistra, abbiamo inserito un bordo solo sul lato destro, abbiamo rimosso gli stili di collegamento predefiniti e ho impostato il mio, quindi ho applicato lo stile al passaggio del mouse e gli stati attivi.
Elenco numerico di grandi numeri
Non dimentichiamo che tutte le liste non sono liste non ordinate! Ci sono sicuramente molte applicazioni utili per gli elenchi ordinati. Una cosa davvero difficile da fare con le liste ordinate è stilare i numeri in modo diverso rispetto all'altro testo. Vediamo come funziona.
demo: Guarda la demo e il codice su CodePen.
HTML
Ora, come ho costruito questo sarà molto controverso. Come puoi vedere, inserisco manualmente i numeri nonostante il fatto che HTML lo faccia automaticamente per te. C'è una buona ragione per questo però.
Per iniziare questa idea, ho buttato un paragrafo nelle voci dell'elenco, quindi ho codificato il tipo li e il tipo li> p in modi diversi. Tuttavia, cercare di ottenere tutto per allineare correttamente con questo metodo è stato un incubo totale. In definitiva, per risolvere il problema, il CSS era così disordinato e cattivo che l'ho abbandonato completamente a favore di questo metodo più semplice che consente in realtà un CSS semplice e chiaro.
CSS
Come puoi vedere nel codice qui sotto, quello che ho fatto qui è stato di eliminare i numeri predefiniti e quindi impostare i miei span in assoluto in modo da poterli spostare a sinistra dei paragrafi, il che a sua volta richiedeva un riempimento extra nei paragrafi. Potrebbe non essere la soluzione più carina in termini di codice, ma è il modo più breve e diretto che potrei inventare per farlo senza bizzarri bug di posizionamento.
Conclusione
Ecco qui, cinque super-semplici ma pratici stili di lista da copiare e incollare nel tuo codice. Se hai altre idee per le liste creative che vorresti condividere, faccelo sapere nei commenti qui sotto!