html5-web-applications

Come creare un pagina portfolio in HTML 5

Postato il

Oggi impariamo a costruire una pagina portfolio con i nostri lavori in anteprima, creando una griglia di immagini con qualche appetitoso effetto grafico. Tutto attraverso il codice HTML 5 e il CSS 3.

La griglia di immagini sarà responsive, cioè sarà in grado di adattarsi alle dimensioni dello schermo, e quindi sarà ottimizzata per i dispositivi mobili come tablet e smartphone.

La griglia

Impostiamo un file HTML 5 standard index.html (vedi qui come costruire una pagina) con una sezione  a tutto schermo e dei tag article con un id numerato.

Aggiungiamo per ogni article un collegamento, un’immagine, un titolo e una descrizione, che corrispenderà all’anteprima del lavoro del nostro portfolio.

Al solito creiamo le cartelle css, img e js rispettivamente per i fogli di stile, le immagini e il files javascript.

Il CSS

Creiamo ora il file css stile.css inserendo alcuni tag di reset  (una serie di regole css che portano alla stato standard le regole dei fogli di stile):

Formattiamo poi lo stile generale per creare una griglia centrata con una larghezza e una posizione relativa. Stilizziamo article affiancando i box con display: inline-block, con larghezza 50% (per renderli adattabili alla dimensione dello schermo del browser), e impostiamo un allineamento verticale al margine superiore. Le immagini all’interno di article avranno poi una larghezza al 100%. Le immagini all’interno degli articoli avranno un’ombra impostata col box-shadow CSS 3.

Impostiamo il box delle informazioni del progetto che mostrerà le info sotto il box immagine una volta cliccata l’immagine. L’elemento fondamentale di questa griglia immagini che ci permette di cliccare sulla thumbnail e di visualizzare le informazioni nel box posto sotto l’immagine senza dover usare il codice jQuery è il selettore :target.

La sezione info è quella che dobbiamo visualizzare al click dell’immagine per cui allo stato di partenza dobbiamo nasconderla con la proprietà opacity:0.

Sfruttando il selettore :target possiamo rivelare l’informazione impostando un’altezza auto e una opacità pari a 1. Questo ci permette di visualizzare il box delle informazioni al momento del click.

Coi selettori nth-child invece possiamo selezionare le informazioni numero 1 di ogni 2 e le informazioni numero 2 di ogni 2; però, mentre la prima va bene così come è posizionata, la seconda deve essere spostata a sinistra aggiungendo un valore di -100%.

Per selezionare la quarta informazione di ogni 4 usiamo sempre il selettore nth-child. La prima rimane a un valore di 0, la seconda a un valore di -109%, la terza a un valore di -218%, la quarta -327%.

Infine evidenziamo il box al quale si riferisce l’informazione:

Alla fine del foglio di stile inseriamo le regole valide per le risoluzioni di schermo differenti dal classico desktop attraverso le media queries. In questo caso  @media only screen and (min-width: 701px) determinerà le regole per le risoluzioni maggiori di 701px di larghezza , mentre @media only screen and (max-width: 700px) determinerà le regole per le risoluzioni inferiori a 700px di larghezza.

Selezioniamo quindi le nostre immagini e inseriamo le informazioni per ogni progetto. E abbiamo realizzato il nostro portfolio responsive! Qui trovi l’esempio online.

Qui puoi trovare i files d’esempio della pagina portfolio. (zip)

%d blogger cliccano Mi Piace per questo: