Oggi vediamo come sia possibile costruire una galleria immagini sfruttando la potenza dei nuovi CSS3; con alcune nuove semplice regole, possiamo ottenere risultati davvero accattivanti ed efficaci senza ricorrere all’utilizzo di script JS o librerie esterne quali jQuery o simili. Il tutorial vi mostrerà come sia possibile ottenere molteplici risultati combinando alcune nuove regole CSS tra di loro e, allo stesso tempo sviluppare un ottimo prototipo per sviluppi futuri; lo script CSS ha una resa ottimale su Browser quali Firefox, Opera, Safari e Chrome.
L’intento del tutorial è quello di costruire una galleria fotografica rappresentata da una serie di Thumbnail strutturate per mezzo di una Lista. Ogni miniatura dovrà avere le stesse dimenzioni al fine di produrre un risultato omogeneo e ogni miniatura sarà racchiusa all’interno di un Link.
A questo punto, una volta costruita la nostra galleria immagini, applicheremo sull’evento :hover del collegamento le regole CSS3 che scaleranno la nostra miniatura, mostrando la stessa in dimenzioni maggiori; durante la preparazione delle vostre miniature dovrete ritagliare le stesse leggermente più grandi del formato che mostreremo poi nella pagina.
Iniziamo nel vedere la struttura HTML delle immagini:
1 2 3 4 5 6 7 | <ul id="images"> <li><a href="#" title="ingrandisci la foto"><img src="1.jpg" alt="image" /></a></li> <li><a href="#" title="ingrandisci la foto"><img src="2.jpg" alt="image" /></a></li> <li><a href="#" title="ingrandisci la foto"><img src="3.jpg" alt="image" /></a></li> <li><a href="#" title="ingrandisci la foto"><img src="4.jpg" alt="image" /></a></li> <li><a href="#" title="ingrandisci la foto"><img src="5.jpg" alt="image" /></a></li> </ul> |
A questo punto scriviamo le regole di base per all’ineare le miniature in orizzontale ed eliminare il bullet di default dalla lista; inoltre applicheremo un piccolo bordo alle immagini e distanzieremo le stesse applicando un margine:
1 2 3 4 5 6 7 8 9 10 11 | ul#images li{ border:1px solid #111; float:left; list-style:none; margin:0 10px; padding:10px;} ul#images li a img{ border:1px solid #bbb; float:left; width:200px;} |
Come potete vedere, ho impostato una larghezza di 200px per ogni immagine al fine di produrre con le stesse le miniature; in origine le stesse hanno invece una larghezza di 320px che mi permetterà di scalarle mantenendo una giusta proporzione.
A questo punto introduciamo la regola sullo stato :hover del link al quale applicheremo le nuove regole CSS3:
1 2 3 4 5 6 7 8 9 | ul#images li a:hover img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);} |
Come potete vedere ho impostato la regola scale per ogni tipo di Browser che implementa questa proprietà; questo ci permetterà di avere, fin quando non ci sarà una equiparazione dei stessi, di una resa equivalente per tutti i motori di render.
Allo stato :hover ho inoltre aggiunto le proprietà per l’ombra che sarà mostrata durante lo scaling dell’immagine.
Nel caso voleste anche ruotare l’immagine, oltre che ingrandirla, possiamo implementare lo stato :hover, applicando la regola rotate:
1 2 3 4 5 6 7 8 | ul#images li a:hover img { -webkit-transform: scale(1.5) rotate(-10deg); -moz-transform: scale(1.5) rotate(-10deg); -o-transform: scale(1.5) rotate(-10deg); transform: scale(1.5) rotate(-10deg); -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);}*/ |
Al fine di approfondire le vostre conoscenze su i CSS3, vi lascio alcuni interessanti Link:
