Le gallerie di miniature sono una delle soluzioni più comuni sul Web per mostrare più immagini. L'efficienza di questo strumento non può essere battuta, consente una rapida navigazione e un'ispezione più ravvicinata quando lo si desidera.
Ogni volta che costruisco una galleria di miniature, mi piace guardare nel Web per vedere cosa stanno facendo gli altri designer per renderli unici. Oggi abbiamo raccolto cinquanta fantastiche gallerie per te. Lungo la strada, discuteremo anche alcune idee che puoi usare nelle tue gallerie.
Ti piace l'articolo? Assicurati di iscriverti al nostro feed RSS e seguici su Twitter per rimanere aggiornato sui contenuti recenti.
Abbandona i margini
Whoa dice che le miniature devono essere distribuite? Questi siti hanno deciso di abbracciare la vicinanza e schiacciare le immagini tutte le une contro le altre. Il risultato è un'impressione di un singolo oggetto costituito da molte parti. Non è solo altamente efficiente nello spazio, è piuttosto attraente.
Questa tecnica è ovviamente la migliore da usare se non è necessario aggiungere molte informazioni contestuali a ciascuna immagine, sebbene l'evento di passaggio del mouse fornisca una buona opportunità per alcuni testi o elementi grafici aggiuntivi.
Shankar

Egopop

Volti gratuiti

Digitale Analogico

Elliot Lepers

XMind

Varia l'altezza verticale
Quando si modifica l'altezza verticale delle immagini nella galleria, il risultato è una pagina dall'aspetto molto più organico. Sebbene il sistema sia ancora governato da regole uniformi, il layout non è rigido come in una griglia tipica.
Questa è ovviamente la soluzione perfetta per la visualizzazione di immagini che hanno diverse altezze, ma dovrebbe anche essere una considerazione ogni volta che il tema generale della pagina è rilassato o libero.
404 non trovato

Paul Mitchell Kelly

Solo Sean

Disegno verticale del grano

Non essere quadrato
I quadrati sono noiosi! Se vuoi che la tua galleria rompa gli schemi, prova a sperimentare forme diverse per le tue miniature. La seconda opzione tipica è quella delle cerchie, come vedrai più avanti, ma come mostra il primo esempio, è sicuramente efficace andare oltre e fare qualcosa di tutto tuo.
Arnaud Beelen

sellected

Centro di attenzione

Passione sul design

Keenan Wells

Immagini storte
CSS3 semplifica la creazione di molti grandi effetti visivi. Un trattamento di immagine recentemente popolare è stato quello di utilizzare le trasformazioni CSS per ruotare le immagini in una galleria, un effetto spesso associato a un'animazione al passaggio del mouse.
Il risultato assomiglia molto a quadri appesi a una parete o polaroid sparsi su un tavolo. Ecco alcune diverse varianti dell'effetto.
Mooreish

Broke Design

Nato nel granaio

Giochi di ombre
Le ombre delle finestre CSS sono una proprietà abbastanza semplice con cui lavorare. Basta impostare la posizione e la sfumatura e sei pronto per partire. Molti sviluppatori hanno scoperto di recente che combinando le ombre con le trasformazioni e gli pseudo selettori, puoi ottenere un sacco di risultati diversi e impressionanti.
Le ombre applicate alla tua galleria possono modificare la sensazione generale dell'intera pagina. Controlla le ombre sottostanti e come danno l'illusione di rimodellare effettivamente l'immagine.
CMYK08

Firma creativa

mustang

Calabriae Studio

Chase Farnum

Dribbble

Atelier

Altre Gallerie Inspiranti
Toni Digrigio

Andrea Ives

Siamo per lo più seri

Cravatta nera

Ben Bate

Andre Kreft

Grafico di Leeds

Anderson de Paulo

Barnt e Arnst

James White Smith

Ketch Studio

Chi è l'ospite

Media Rain

Chris Arbini

Sumit Paul

Trovato colore

Carte Hoban

Diviso

A Punkt Hella

Kubi Media

Consiglio cubano

Gabbiani eleganti

Froot

Codice delle arti

Mathieu Clauss

Mostraci il tuo!
Ora che hai visto la nostra collezione di alcune delle gallerie più interessanti, è il tuo turno di condivisione. Lascia un commento qui sotto con un link a tutte le gallerie che hai costruito o semplicemente trovato di ispirazione.