Il fascino visivo intrinseco dei portafogli filtrabili (come l'hub Tuts +) li ha resi molto popolari. Oggi ne faremo uno usando markup straight-forward, CSS3 e un po 'di jQuery.
Passaggio 1: la struttura del file
Useremo la seguente struttura di file per il nostro progetto:
Traccia un progetto in base a questi file (dovrai afferrare HTML5 Shiv) e iniziamo con il markup HTML in index.html.
Passaggio 2: HTML Head
Teniamo alto il tempo e facciamo un elenco di cose che dobbiamo fare per creare il :
Dichiarare il tipo di supporto e il set di caratteri della pagina.
Imposta la larghezza della nostra vista in modo che corrisponda alla larghezza del dispositivo e imposta lo zoom iniziale su 1 (Leggi ulteriori informazioni qui)
Dai alla nostra pagina un titolo.
Allegare una favicon (interessata alle favicon a prova di retina?)
Allega il nostro foglio di stile principale (style.css)
Allega il nostro foglio di stile per la gestione delle query multimediali (media-queries.css)
Link all'ultima versione di jQuery.
Aggiungi uno Shiv HTML5 per gestire i problemi di compatibilità HTML5 con i vecchi browser.
Ed ecco cosa otteniamo:
Portfolio di John Doe
Passaggio 3: markup di base HTML
Nel corpo, per prima cosa aggiungiamo un "contenitore" per contenere tutti i nostri elementi all'interno di una larghezza impostata, centrata sulla pagina. All'interno di ciò aggiungiamo (preparatevi per un'altra rapida lista di fuoco):
UN per la nostra rubrica ("John Doe").
Una navigazione di base () comprendente a
menu, con cinque voci, ciascuna con il proprio ID.
UN per le miniature con la classe 'lavoro'.
UN con tutte le cose sul copyright.
John Doe
Passaggio 4: Figura e immagine HTML
Useremo il etichetta per le nostre miniature e applicherà la classe della rispettiva categoria a cui appartiene. All'interno della figura, aggiungeremo un tag comprendente l'immagine () per lo sfondo della miniatura e a lista di descrizione (
) per la didascalia.
Passaggio 5: HTML Caption (DL, DT, DD)
Come accennato in precedenza, utilizzeremo un elenco di descrizione per la nostra didascalia. I nostri termini di descrizione () saranno le nostre piccole intestazioni - Cliente e Ruolo, per le nostre descrizioni () - Envato e Illustration, rispettivamente.
Cliente
Envato
Ruolo
Illustrazione
Passaggio 6: l'HTML completo
Ecco come appare il nostro markup HTML completato:
Portfolio di John Doe
John Doe
Cliente
Envato
Ruolo
Illustrazione
Cliente
Envato
Ruolo
Stampare
Cliente
Envato
Ruolo
Logo
Cliente
Envato
Ruolo
web
Cliente
Envato
Ruolo
Stampare
Cliente
Envato
Ruolo
web
Cliente
Envato
Ruolo
Stampare
Cliente
Envato
Ruolo
web
Cliente
Envato
Ruolo
Illustrazione
Cliente
Envato
Ruolo
Stampare
Cliente
Envato
Ruolo
web
Cliente
Envato
Ruolo
Logo
Cliente
Envato
Ruolo
Illustrazione
Cliente
Envato
Ruolo
web
Cliente
Envato
Ruolo
Logo
Cliente
Envato
Ruolo
Stampare
Passiamo ora allo stile.
Passaggio 7: selezione CSS e barra di scorrimento
Inizieremo affrontando alcuni elementi giocosi; lo stato di selezione e la barra di scorrimento (che sono completamente opzionali) in più porteremo alcuni tipi di carattere.
Nel codice precedente, abbiamo importato due webfonts da Google: Open Sans e PT Sans Narrow. Quindi, impostiamo semplicemente uno sfondo grigio scuro e un colore bianco per le selezioni dell'utente.
Abbiamo quindi impostato una larghezza di 9 px per la nostra barra di scorrimento (nei browser Webkit) e abbiamo fornito alla "traccia" uno sfondo grigio chiaro, un bordo sottile e una leggera ombreggiatura interna. Quindi, abbiamo dato uno sfondo grigio scuro al pollice della barra di scorrimento e aggiunto un bordo sottile ad esso.
Nota: Per ulteriori informazioni su webkit-scrollbar, vedere il post di Chris Coyier.
Passaggio 8: Corpo CSS
Daremo al nostro corpo uno sfondo grigio chiaro e applicheremo il carattere "Open Sans" che abbiamo importato in precedenza. Aggiungiamo anche un bordo superiore rosso per una finezza migliorata.
Ora, per il nostro contenitore, imposteremo una larghezza di 960 px, un margine superiore e inferiore di 10 px e lo centreremo sulla pagina impostando i margini destro e sinistro su "auto'. Potremo anche forzare l'accelerazione hardware su (alcuni) dispositivi mobili usando '-webkit-transform: translateZ (0);'.
Centreremo il testo orizzontalmente, aggiungiamo i margini superiore e inferiore di 50 px ciascuno, impostiamo il colore del testo in grigio e lo posizioniamo sotto la sezione 'lavoro' usando 'chiaro: entrambi'.
Inizieremo rimuovendo tutto lo stile predefinito dal nostro
. Quindi, aggiungeremo un margine superiore e inferiore di 50 px e allineamo il testo al centro.
nav ul list-style: none; padding: 0; margine: 50px 0; allineamento del testo: centro;
Ora, usando 'display: in linea', avremo tutto il nostro s da visualizzare in una riga. Impostiamo il cursore su "pointer" e aggiungiamo un margine destro di 10px a ciascuno . Il colore predefinito del testo sarà una leggera sfumatura di grigio che diventerà nera al passaggio del mouse.
Aggiungiamo anche un piccolo tempo di transizione per animare le variazioni di colore.
nav ul li display: inline; cursore: puntatore; margin-right: 10px; colore: # 666; transizione: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transizione: 0.3s; -ms-transition: 0.3s; nav ul li: hover color: # 000;
Dall'ultimo è, umm, l'ultimo figlio, non ha bisogno di alcun margine destro. Quindi, lo rimuoveremo.
nav ul li: last-child margin-right: 0;
Ora, aggiungiamo le barre dopo il S. Lo faremo usando il ':dopo'pseudo-selettore. Impostando il suo 'soddisfare'a' / ', dal colore al grigio chiaro e un margine sinistro appropriato, possiamo produrre un sistema di separazione dei collegamenti semplice ma efficace. Ci assicureremo inoltre che le barre non cambino colore al passaggio del mouse forzandone il colore predefinito li: hover pure.
nav ul: after margin-left: 10px; contenuto: '/'; color: #bbb; nav ul li: hover: after color: #bbb;
Ancora una volta, dovremo rimuovere la barra dall'ultima .
nav ul li: last-child: after content: ";
Questo è tutto per la navigazione, ora arriviamo alle miniature.
Passaggio 13: Miniature CSS
Innanzitutto, aggiungeremo un margine superiore e inferiore di 20 px alla sezione ".work".
.work margin: 20px 0;
Successivamente, modelleremo ogni '.figura di lavoro'(cioè tutte le nostre miniature). Useremo 'float: a sinistra'per farli allineare. Aggiungiamo quindi un margine di 20 pixel, impostiamo un'altezza e una larghezza di 200 px e aggiungiamo un lieve effetto seppia usando "-webkit-filter: sepia (0.4)'. Quindi, imposteremo il posizione a parente in modo che possiamo posizionare in modo assoluto altri elementi (la didascalia in questo caso) all'interno di figura. Aggiungeremo un lieve box-ombra che funzionerà anche come nostro confine. Aggiungiamo anche un piccolo tempo di transizione per le nostre scatole per crescere e ridimensionare.
Ci assicureremo che la nostra immagine si adatti sempre all'anteprima impostando l'altezza e la larghezza al 100%.
.figura del lavoro a img height: 100%; larghezza: 100%;
Questo è tutto per le nostre miniature di base. Lavoriamo ora alle loro didascalie.
Passaggio 14: Didascalie CSS
Elenco di descrizione
Dato che non vogliamo che la nostra didascalia sia inizialmente visibile, la imposteremo opacità a 0. Quindi, lo posizioneremo in modo assoluto (all'interno della figura) e lo riempiremo completamente impostando tutte le 4 proprietà - superiore, destra, parte inferiore, e sinistra - a 0.
Quindi imposteremo il suo altezza della linea a 2.5 e dargli uno sfondo scuro e traslucido. Poiché utilizziamo uno sfondo scuro, imposteremo il colore del suo testo su bianco. Aggiungeremo anche un piccolo tempo di transizione per animare la sua opacità figura: hover.
.figura di lavoro dl opacità: 0; posizione: assoluta; a sinistra: 0; a destra: 0; fondo: 0; inizio: 0; imbottitura: 20px; margine: 0; altezza della linea: 2,5; background: rgba (0, 0, 0, 0.8); colore bianco; transizione: 0,6 s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transizione: 0,6 s; -ms-transizione: 0,6 s;
Dato che vogliamo che appaia al passaggio del mouse sulla miniatura, ne imposteremo la sua opacità a 1 sopra figura: hover.
.figura di lavoro: hover dl opacity: 1;
Descrizione Termini
Per prima cosa, imposteremo i loro famiglia di font a "PT Sans Narrow". Per farli sembrare un po 'più piccoli delle loro descrizioni, li imposteremo dimensione del font all'80%. Quindi, convertiremo i termini descrittivi (Cliente e Ruolo) in maiuscolo usando 'text-transform: uppercase'. Imposteremo anche un margine inferiore negativo per evitare una spaziatura eccessiva tra i termini e le loro descrizioni.
.figura di lavoro dl dt text-transform: maiuscolo; font-family: "PT Sans Narrow"; font-size: 12px; margin-bottom: -16px;
Descrizioni delle definizioni
Non abbiamo bisogno di fare molto qui - ci limiteremo a impostare il margine a 0. (Di default, s hanno un leggero margine sinistro.)
Quando le miniature di una certa categoria sono date il .attuale classe (tramite JS), vogliamo che crescano e riprendano il loro normale tono (cioè rimuovere il seppia). Li scaleremo usando 'trasformare: scala (1,05)', quindi ridimensionandolo a 1,05 volte la dimensione originale su entrambi gli assi xe y rimuovi il seppia che avevamo aggiunto in precedenza usando'-webkit-filter: sepia (0)'.
Qui, faremo l'esatto opposto di ciò che abbiamo fatto al .attuale miniature: le ridimensioneremo al 75% utilizzando 'trasformare: scala (0,75)'e renderli in bianco e nero usando'-webkit-filter: grayscale (1)'.
Ecco cosa faremo attraverso il nostro Javascript (in ordine cronologico):
individuare nav> li stampa.
Riduci tutte le miniature dando loro il .Non-corrente classe.
Aggiungi il .current-Li classe al corrispondente della categoria selezionata .
Rimuovi il .Non-corrente classificare solo dalle miniature della categoria selezionata.
Aggiungi il .attuale classe a tutte le miniature della categoria selezionata.
# 2 qui sarà fatto usando il rimpicciolire() la funzione e # 3, # 4 e # 5 saranno fatte usando il Show (categoria) funzione.
Step 18: JS The rimpicciolire() Funzione
Usando il removeClass e addClass metodi, rimuoveremo il .attuale classe dagli elementi che lo hanno e aggiungere il .Non-corrente classe a tutti loro. Rimuoveremo anche il .current-Li classe da qualsiasi che attualmente ce l'ha.
Questa funzione sarà implementata ogni volta a è cliccato. In primo luogo, chiameremo il rimpicciolire() funzione per ridimensionare tutte le miniature. Quindi, aggiungeremo il .current-Li classe al che corrisponde alla categoria selezionata. In seguito modificheremo la classe delle miniature della categoria .Non-corrente a .attuale (avevamo applicato il .Non-corrente classe a tutti i thumbnails in rimpicciolire() funzione). Infine, se la categoria selezionata è 'tutti', rimuoveremo le classi aggiunte dinamicamente (ad es. .attuale e .Non-corrente) da tutte le miniature.
Nota: Dal momento che il nome del id (del ) e classe (del figuras) di ogni categoria è la stessa, ci riferiremo semplicemente al come '# + categoria' e il figuras come '. + categoria'.
Passo 20: JS Rileva clic e Implementazione di Show (categoria) Funzione
Finalmente, attraverso il document.ready metodo, aggiungeremo il .current-Li classe a li # tutto e rilevare nav> li scatti. Otterremo quindi il id del clic e implementare il Show (categoria) funzione in cui l 'categoria' sarà 'this.id'l'id del clic fatto . Quindi, per esempio, se il con l'id #stampare è cliccato, mostrare ( 'print') sarà implementato.
Ora che il nostro sito è perfettamente funzionante, rendiamolo reattivo.
Passaggio 22: CSS renderlo reattivo
Apriamo "media-queries.css" e procediamo. Il modo in cui scegli di implementare le tue query multimediali dipende interamente da te. Potresti preferire avere delle query multimediali all'interno del tuo foglio di stile principale, potresti anche preferirle avere delle modulari e in linea con ogni dichiarazione di stile - dipende da te!
Le modifiche allo stile richieste per ogni punto di interruzione sono descritte qui.
965 px o meno
Riduci la larghezza del contenitore a 840 px
Ridurre l'altezza e la larghezza delle miniature a 170 px ciascuna in modo da contenere 4 miniature in ogni riga [(170px + 40px) x 4 = 210px x 4 = 840px]
/ * Viste piccole - Vecchi monitor, netbook, tablet (orizzontale), ecc. * / @ Schermata solo media e (larghezza massima: 965px) .container larghezza: 840px; .work figure width: 170px; altezza: 170 px;
860 px o meno
Riduci la larghezza del contenitore a 720px
Aumenta l'altezza e la larghezza delle miniature di nuovo a 200 px ciascuna per adattarle a 3 in ogni riga [(200px + 40px) x 3 = 240px x 3 = 720px]
/ * Viewport più piccoli - più tablet, vecchi monitor * / @media solo schermo e (larghezza massima: 860px) .container larghezza: 720px; .work figure width: 200px; altezza: 200 px;
740 px o meno
Riduci la larghezza del contenitore a 600 px
Diminuisci l'opacità del .Non-corrente al 50% (dal momento che stiamo principalmente lavorando per dispositivi mobili ora)
Riduci l'altezza e la larghezza delle miniature a 160 px ciascuna per contenere 3 in ogni riga [(160px + 40px) x 3 = 200px x 3 = 600px]
/ * Visualizzatori anche più piccoli - più tablet, ecc. * / @Media solo schermo e (larghezza massima: 740px) .container larghezza: 600px; .work figure width: 160px; altezza: 160px; .not-current opacity: 0.5;
610 px o meno
Riduci la larghezza del contenitore a 460 px
Imposta il margine superiore e inferiore delle miniature su 20 px e margine sinistro e destro su 60 px
Aumentare l'altezza e la larghezza delle miniature di nuovo a 200 px ciascuna per contenere 1 in ogni riga [(200 px + 120 px) x 1 = 320 px x 1 = 320 px]
/ * Cellulari (Orizzontale) e Tablets (Verticale) * / @media solo schermo e (larghezza massima: 610px) .container larghezza: 460px; header dimensione font: 400%; nav ul li figura .workwork margin-left: 40px; margin-bottom: 60px; .work figure dl height: 40px; superiore: 200 px; fondo: 0px;
480 px o meno
Riduci la larghezza del contenitore a 320 px
Imposta il margine superiore e inferiore delle miniature su 20 px e margine sinistro e destro su 60 px
Aumentare l'altezza e la larghezza delle miniature di nuovo a 200 px ciascuna per contenere 1 in ogni riga [(200 px + 120 px) x 1 = 320 px x 1 = 320 px]
/ * Telefoni cellulari (verticale) * / @media solo schermo e (larghezza massima: 480px) .container larghezza: 320px; .work figure width: 200px; altezza: 200 px; margine: 20px 60px;
Compatibilità del browser
La funzionalità di ridimensionamento di base (trasformazioni CSS) funziona perfettamente nella maggior parte dei principali browser, tra cui:
IE 9+ (utilizzare http://www.useragentman.com/IETransformsTranslator/ per versioni inferiori)
Firefox 14+
Chrome 21+
Safari 5.1+
Gli effetti filtro (seppia e scala di grigi) funzionano solo nei browser Webkit.
jsFiddles
Ho creato tre jsFiddles per provare e sperimentare:
Didascalia Split Effect (verticale)
Didascalia Split Effect (orizzontale)
Immagini in miniatura con maschera diagonale
Conclusione
Questo è tutto! Abbiamo creato con successo un portafoglio funzionante, filtrabile e reattivo. Spero tu abbia trovato utile questo tutorial. Grazie per aver letto!
Share
Accentsconagua
