L'impaginazione del sito Web è un aspetto cruciale per qualsiasi layout con contenuti ripetuti. I blog sono spesso una considerazione, ma anche elenchi di portfolio o link relativi a notizie / feed o altri tipi di archivi. Organizzare un post sul blog in molte pagine aiuta a ridurre il tempo di lettura, specialmente con articoli particolarmente approfonditi.
In questo tutorial voglio dimostrare una raccolta di tecniche CSS per la progettazione dell'impaginazione. Una volta combinati questi progetti con sistemi di contenuti come WordPress puoi vedere come le interfacce funzionano davvero in azione. Per avere un'idea del prodotto finale dai un'occhiata alla mia demo dimostrativa dal vivo qui sotto.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Questo tutorial non richiede alcun codice JavaScript, quindi non ci sono affatto dipendenze di file. Mi piacerebbe iniziare sottolineando il semplice layout di pagina. Ogni link impaginato va a una diversa pagina HTML con un elenco di 5 in totale.
Noterai rapidamente la linea commentata che mostra un pulsante precedente per spostarti tra le pagine. Ho solo mostrato questo link all'interno degli altri layout perché nella prima pagina non abbiamo modo di tornare a una pagina precedente. Anche la prima voce dell'elenco La singola non ha link di ancoraggio, mostra solo il numero di pagina corrente e il numero totale di pagine.
L'esempio sopra è copiato da index-2.html che visualizza la seconda pagina. Troverete che ogni singola pagina numerica non ha un'ancora che ritorna su se stessa. Invece applichiamo una classe di .attuale sulla voce dell'elenco per un aspetto diverso.
Stili di pagina generali
Ho diviso il foglio di stile in segmenti insieme alle tipiche reimpostazioni di pagina. Ciò semplifica la copia e l'incolla dello stile esatto dei collegamenti di paginazione con cui vuoi lavorare.
Niente di diverso qui rispetto ai miei altri tutorial. Usando l'esterno .paginate classe sulla lista non ordinata significa che questo si applicherà a tutti gli UL in tutte le pagine. Aumenta la dimensione del carattere generico assicurando che la lista si estenda su tutta la larghezza del contenitore genitore.
Direttamente sotto questo codice troverai gli altri 5 blocchi per ciascuna delle sezioni di impaginazione. Questo è un esempio della mia prima idea di design. Il container .paginate.pag1 non ha stili predefiniti, ma se si desidera applicare qualcosa direttamente a questo elenco non ordinato, è possibile farlo scegliendo come targeting singoli stili di impaginazione.
I collegamenti usano uno sfondo a colori piatto insieme ad alcune ombre di riquadri che si aggiornano quando si fa clic. Si tratta di un design semplice che può essere realmente adattato a qualsiasi layout del sito Web, a condizione di aggiornare leggermente lo schema dei colori.
Ulteriori stili di impaginazione
Guardando il mio secondo disegno potreste notare che questo è stato creato attorno al PSD di Minimal Pagination pubblicato su Pixels Daily. Ho dato più spazio alle ombre e ho ridotto le dimensioni dei caratteri. Ma è un modello fantastico che puoi iniziare a personalizzare molto rapidamente.
Un'altra interessante versione di Pixels Daily denominata Slick Pagination Links include una copia PSD e CSS. La mia terza demo è basata su questo design, ma ho scritto tutto il codice CSS da solo.Ho provato ad abbinare colori simili nel gradiente, ma ho usato un bordo più spesso attorno ad ogni link.
Probabilmente avrà un aspetto migliore su uno sfondo più chiaro o avvolto in un contenitore UL leggero. Ma l'aggiornamento del bordo e dei gradienti di sfondo non richiederebbe molto lavoro con un designer di combinazioni di colori. Gli stati attivi e al passaggio del mouse aggiornano semplicemente lo sfondo e ho evitato di modificare le ombre delle caselle.
Tutti questi progetti possono essere estesi per includere diversi tipi di font, icone, padding e altre funzionalità CSS. Tutto il mio codice è scritto al minimo comune denominatore, quindi speriamo che questi stili possano funzionare bene con qualsiasi pagina web.
Nav link arrotondati
Le mie ultime due pagine usano lo stesso tipo di design, ma semplicemente invertono lo schema dei colori dalla luce al buio. Sto mostrando solo i codici CSS più scuri perché hanno più modifiche. Tutte le proprietà del display devono corrispondere perfettamente a parte i colori.
Questo particolare design si basa su un PSD premium chiamato Flat Pagination Interface, anch'esso di Pixels Daily. Osservando lo screenshot vedrai che ha un elenco più piccolo e utilizza i puntini di sospensione per spostarsi da una pagina all'altra. Questo è comune quando hai più di 10 pagine nella lista e non vuoi visualizzarle tutte in una volta.
Ho menzionato in precedenza che possiamo scegliere come target la lista non ordinata esterna usando il suo nome di classe come .paginate.pag5. Aiuta a dimostrare i collegamenti, ma probabilmente non sarà utile su un sito web live a meno che non si preveda di utilizzare diversi stili di impaginazione.
Ciascuno di questi ultimi due stili include transizioni CSS3 per gli stati al passaggio del mouse. È una bella funzionalità aggiuntiva che puoi scegliere di mantenere, ma non sempre ha un bell'aspetto in tutte le istanze.Entrambi gli schemi di colori chiari e scuri includono punti salienti del verde per adattarsi al layout della pagina. Se ti piace questo design, gioca con i colori e vedi se l'interfaccia chiara o scura è più adatta al tuo progetto.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Molte di queste tecniche possono essere adattate con i tuoi stili per creare un'impaginazione unica del sito web. Non è un aspetto cruciale per tutti i siti web, ma diventa immediatamente importante se hai a che fare con una notevole quantità di contenuti.
Sentiti libero di scaricare una copia del mio codice sorgente e utilizzare questi stili CSS per qualsiasi impaginazione del sito. Inoltre, se hai domande o suggerimenti correlati, puoi condividere con noi nell'area di discussione qui sotto.