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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="it" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Portfolio</title> <link rel="stylesheet" type="text/css" href="css/stile.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <header> <h1>Pagina Portfolio</h1> </header> <section id="grid"> <article id="01"> </article><article id=“02”> </article> </section> </body> </html> |
Aggiungiamo per ogni article un collegamento, un’immagine, un titolo e una descrizione, che corrispenderà all’anteprima del lavoro del nostro portfolio.
|
1 2 3 4 5 6 7 8 9 10 11 |
<article id="01"> <a href="#01"><img src="images/01.jpg" /></a> <div class="info"> <div class="description"> <h1>Primo lavoro</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in massa ultrices diam lobortis convallis quis in risus. Phasellus a augue vitae sapien condimentum condimentum quis at eros. In nisl lacus, pharetra nec commodo quis, accumsan ac sapien.</p> </div> </div> </article> |
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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0; } body { font-family: Arial, sans-serif; color: #000; background: #B8DDE3; } a { color: #; text-decoration: none; } h1{ color:#000; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
section { max-width: 1000px; margin: 0 auto; overflow: hidden; position: relative; padding: 10px 0px 0px 10px; } section article { vertical-align:top; display: inline-block; width:50%; margin-bottom:-5px; } section img { width:100%; height:auto; padding:0px; border:1px solid #000; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); { |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
section .info { width: 180%; padding: 2em 0; margin: 0; position: relative; float: left; opacity: 1; height: 0; font-size: 0; } section .info h1 { margin-bottom: .5em; color:#000; } section .info p { margin-bottom: 2em; line-height: 140%; color:#000; } section .info .maggioriInfo { display: block; margin-left:10px; margin-top: 0em; padding: .4em; background:#4C9ED9; color: white; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 1em; -webkit-transition: 0.5s background-color; -moz-transition: 0.5s background-color; -ms-transition: 0.5s background-color; -o-transition: 0.5s background-color; transition: 0.5s background-color; } section .info .maggioriInfo:hover { background-color: #000; } article:nth-child(2n+1) .info { left: 0; } article:nth-child(2n+2) .info { left: -100%; } section article:target .info { height: auto; font-size: 100%; opacity: 1; -webkit-transition: .4s .4s opacity; } section article:target img { border: 3px solid #4C9ED9; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; } section article:nth-child(4n+1) .info { left: 0; } section article:nth-child(4n+2) .info { left: -109%; } section article:nth-child(4n+3) .info { left: -218%; } section article:nth-child(4n+4) .info { left: -327%; } |
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)
