C'è una tendenza generale verso elenchi di colonne più piccoli? nei layout della home page. In particolare, le startup tecnologiche e le landing page utilizzano questo effetto per promuovere le funzionalità nei loro prodotti. Ma è un piccolo stile di layout di design pulito per qualsiasi scopo, e l'uso di icone nel tuo progetto si distaccherà dai normali modelli di design per una visualizzazione di elenchi intrigante.
In questo tutorial voglio dimostrare come possiamo usare i Webfile personalizzati di CSS3 come un'icona all'interno dell'HTML. Creeremo un sito Web di avvio molto semplice utilizzando l'approccio dell'elenco a due colonne. Tutto il CSS è molto semplice, anche se potrebbe essere necessario fare un po 'di ricerca su alcune proprietà. Questo effetto è nativo per tutti i browser conformi agli standard e rende perfettamente su OS X o Windows.
Demo dal vivo - Scarica il codice sorgente
Download di font
Consiglio sempre ai designer di verificare il set di font Entypo che è open source e da scaricare gratuitamente. Il pacchetto contiene caratteri di tutti e 4 i principali tipi di file e ha anche versioni desktop per l'installazione su Mac o PC. Ha anche un icon pack separato per i pulsanti dei social media. Abbiamo solo bisogno della famiglia di font web Entypo copiata in una nuova directory chiamata fonts. Ecco l'elenco dei file che ho incluso:
- entypo.eot
- entypo.svg
- entypo.ttf
- entypo.woff
Dimostrerò come includerlo con i CSS un po 'più tardi. Basta essere sicuri che tutto sia organizzato correttamente e pronto per essere incluso nella pagina. Anche la mia demo ha una piccola cartella di immagini per gli effetti BG, ma non sono pertinenti all'intero layout. Basta scaricare una copia della mia demo se si desidera che tutte le risorse siano unite.
Per prima cosa dovremmo esaminare come è strutturata la pagina e il piano per allineare tutto perfettamente.
Pianificazione dell'HTML
Non è necessario coprire tutto il codice HTML in-page ma solo i bit importanti. La prima è la mia sezione di intestazione che contiene un link al relativo file CSS, oltre ad alcuni Webfonts unici di Google. Si noti che il nostro CSS3 locale @ Font-face la dichiarazione non avrà alcun effetto su questi font di terze parti.
Qui non c'è molto fuori dall'ordinario, quindi possiamo passare direttamente alla sezione del corpo. Sto usando un div wrapper esterno con un interno #soddisfare contenitore. Questo contiene l'intera sezione della pagina interna insieme agli elementi della lista di 2 colonne. L'intero oggetto è in realtà all'interno di un elenco non ordinato utilizzando l'ID #Caratteristiche.
Ho aggiunto un .clearfix classe sull'elemento UL esterno in modo che il contenitore spingerà verso il basso il resto del contenuto della pagina. Poiché tutte le voci dell'elenco interno sono mobili, abbiamo bisogno di un metodo per tenere sotto controllo il modello di box. Allo stesso modo ogni elemento della lista .Feature contiene sia uno span che un titolo più piccolo.
L'intervallo utilizza le icone dei nostri pittogrammi per visualizzare un disegno specifico proprio accanto al testo. Abbiamo la possibilità di aggiungere più classi in modo che una voce di elenco possa estendersi su tutta la pagina. Gli elementi feature sono solo l'oggetto contenitore più basilare in cui abbiamo 2 elenchi per riga. Noterai anche che lo span dell'icona ha sia una classe per la famiglia di caratteri speciali, sia una classe per il tipo di icona che stiamo visualizzando.
Questa classe secondaria è utile se l'icona è posizionata in una strana posizione. Se qualcosa è troppo grande o troppo piccolo, o posizionato in modo maldestro, questa classe diretta è più facile da manipolare. Inoltre, sfogliare il codice HTML è un processo semplice. L'ultimo bit di codici sono dentro il mio styles.css file e certamente non è troppo complicato.
Stili di colonne con CSS
Il primo pezzo interessante che noterai è in cima al mio file. Qui stiamo usando una nuova dichiarazione font-face CSS3 per configurare i font icon. Utilizzando un unico nome di famiglia possiamo importare tutti e 4 i vari tipi di file contemporaneamente.
L'aggiuntivo font-weight e stile del font le proprietà non sono necessarie, ma ne vale sicuramente la pena. Non fa male specificare che il nostro nuovo font non è in grassetto o in corsivo per impostazione predefinita. È anche un ottimo modello che vale la pena di salvare se si prevede di utilizzare molti font Web CSS3.
Questo è un altro bit interessante di codice che non ho mostrato nell'HTML. Fondamentalmente ho impostato un paragrafo di testo introduttivo che è suddiviso in due colonne usando le nuove proprietà CSS3 e i relativi prefissi dei produttori. Nota che questo non ha nulla a che fare con l'elenco delle icone, ma è un altro metodo per generare contenuti con colonne nelle tue pagine.
Ora ho tutti i codici designati per l'elenco principale dei pittogrammi.All'interno della mia classe di pittogrammi stiamo usando la nuova famiglia 'EntypoRegular' impostata su una dimensione predefinita di 8em. Le icone sono in origine molto piccole, quindi dobbiamo assicurarci che siano abbastanza grandi da essere posizionate proprio accanto a un blocco di sottotitoli.
Ognuno di .Feature gli articoli sono limitati a una larghezza di 420 px insieme ad alcuni padding interni. Gli spazi tra ogni colonna forniscono una larghezza pari al 100% alla lista non ordinata. E all'interno delle voci dell'elenco abbiamo i pittogrammi che galleggiano a sinistra con posizionamento relativo. Potresti essere sorpreso di quanto sia facile mantenere ciascuna icona posizionata nel posto giusto con alcune aggiunte minori.
L'ultimo blocco di codice è una raccolta di tutte le diverse classi di icone messe insieme. Ho misurato individualmente ognuno su 12em perché alcune icone appaiono più grandi o più piccole di altre. Con questo sistema è possibile individuare ogni singolo set di icone per cambiare il modo in cui appaiono. E poiché sono posizionati rispetto al contenitore, puoi anche usare le proprietà sinistra / destra / alto / basso per un facile allineamento.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Anche se questo non è un tutorial particolarmente difficile, le varie fasi per la creazione di un elenco di colonne possono richiedere molto tempo. È necessario determinare il carattere dell'icona perfetto e pianificare il testo scritto in modo che si adatti perfettamente.
Questa demo dovrebbe fornire un buon punto di partenza per far girare la palla. Dedica un po 'di tempo al brainstorming delle tue idee e di come puoi applicare questo design in layout simili. Inoltre se avete commenti o domande sentitevi liberi di condividere l'area di discussione dei commenti qui sotto!