Introduzione
Le gallerie d’immagini possono risultare piuttosto comode per organizzare le immagini. Esse, infatti, sono gruppi di immagini accomunate da certe caratteristiche. Vediamo come codificare tutto ciò.
Iniziamo dal CSS
Iniziamo a definire la cosa più importante in una galleria: la grafica. Per fare ciò organizzeremo all’interno dello style (noi useremo anche qui CSS interno) 4 “classi” (gruppo di proprietà applicabili con il richiamo di una parola ad un elemento).
Iniziamo a vedere la prima:
!!Questo è l’unico passaggio obbligatorio per creare una galleria. Gli altri sono utilissimi però a renderla uniforme e facilmente visualizzabile.
Qui definiamo le caratteristiche generali di ogni elemento a cui applicheremo gallery.
Andiamo a vedere la seconda dove definiamo le caratteristiche dell’elemento quando il mouse passa su di esso.
Quindi quando si verifica l’hover il bordo della galleria si modificherà da 1px solid black a 2px solid yellow. Ma questa seconda caratteristiche durerà solo sarà in vigore l’hover e quindi il mouse sarà posizionato sopra l’elemento della galleria che stiamo analizzando.
Adesso vediamo la 3 classe dove definiamo le caratteristiche delle immagini contenute nella galleria.
Qui abbiamo definito le dimensioni dell’immagine. La larghezza (width) corrisponde con la larghezza della galleria (400px in questo caso), ma avremmo potuto mettere anche una misura in px. L’altezza (height), invece, è automatica, cioè si adegua alla larghezza senza modificare le forme dell’immagine.
Andiamo a vedere l’ultima classe.
Con questa classe abbiamo definito la distanza fra il bordo della galleria e il contenuto della descrizione (padding che vedremo meglio prossimamente) e anche allineamento della descrizione rispetto all’immagine (allign anche questo lo vedremo meglio più in là).
La vera creazione: HTML
Adesso dobbiamo “veramente” creare la nostra galleria inserendo nel body del codice in HTML. In queste linee chiameremo le classi che abbiamo appena definito e le applicheremo a degli elementi testuali e delle immagini.
In questo modo abbiamo applicato le classi della galleria e della descrizione.
Adesso ripetiamo l’operazione tutte le volte di cui abbiamo bisogno per creare la nostra galleria. Noi la ripeteremo ancora una volta per mostrarvi il risultato finale.
E questo il risultato:
Nel logo white non si vede ma c’è il mouse.
Se notate troverete nelle immagini tutte le caratteristiche descritte nelle classi precedenti.
Arrivederci!
E con questo possiamo finire qui questo articolo. Speriamo di rivederci presto! Buon coto a tutti!