Pubblicato il

galleria

responsive

grid

skeleton

tutorial

italiano


Titolo Immagine

Titolo Immagine

Titolo Immagine

Titolo Immagine

Titolo Immagine

Titolo Immagine

Titolo Immagine

Titolo Immagine


Potete trovare il codice completo per la realizzazione di questa galleria  imagini fatta con HTML e CSS (senza Bootstrap) in questa repository di Github di devnews.it.
Potete scaricare il codice e usarlo nel vostro progetto. In cambio vi chiedo solamente di condividere questa pagina con i vostri amici o di mettere "Mi piace" sulla nostra pagina Facebook

Ciao a tutti e benvenuti a questa guida su come creare una galleria immagini responsive usando solamente codice HTML e CSS.
In questa guida in italiano non useremo un framework CSS come Bootstrap o Skeleton, dato che lo scopo di questo sito è quello di insegnarvi le tecniche base del web development.
A mio parere, se volete veramente diventare dei buoni sviluppatori web, dovete iniziare creando qualsiasi cosa usando puro HTML, CSS e JS, questo vi consentirà di ammaestrare i concetti base di questi linguaggi. Una volta che vi sentite sicuri di aver capito i concetti base, allora potete passare ad usare dei framework come Bootstrap, Skeleton, etc.

Ora che ho fatto la ramanzina possiamo cominciare 

Divideremo questa guida in due parti: codice HTML e codice CSS

- Creare il codice HTML per la galleria immagini

<div id="galleria">
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
</div>


Come vedete abbiamo un <div> contenitore per la galleria, ed un <div> interno contenente l’immagine.

Ripetiamo questi div con le immagini per il numero di immagini totali della galleria, nel mio caso sono 8 immagini.

<div id="galleria">
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
    <div class="immagine">
        <img class="preview" src="https://images.devnews.it/tutorials/mongodb-mac/thumb-windows.png">
    </div>
</div>

- Codice CSS per la galleria immagini

#galleria{
    text-align: center;
    width: 100%;
}


Per prima cosa settiamo la larghezza del contenitore galleria a 100%, in modo da espandere la galleria per l’intera lunghezza dello schermo. Poi mettiamo text-align: center Per centrare la posizione delle immagini della galleria.

.immagine{
    display: inline-block;
    width: 22%;
    margin: 10px 1%;
}


In seguito posizioniamo i div contenenti le immagini una affianco all’altra invece di un sopra all’altra. Con la regola CSS
display: inline-block.
Poi settiamo la larghezza delle immagini a seconda di quante immagini vogliamo in una riga della galleria. In questo esempio vogliamo cominciare con 4 immagini in una riga. Quindi la larghezza di un’immagine sarà uguale a (100 / 4) – margine laterale.

.preview{
    width: 100%;
}


Poi molto importante, settiamo la larghezza dell’elemento immagine a 100%, assicurandoci che le dimensioni dell’immagine saranno uguali a quelle del suo contenitore.

In fine andiamo a dichiarare dei vari breakpoint, ovvero delle larghezze di schermo specifiche per la quale, solamente alcune regole CSS saranno applicate.

Per esempio se usiamo la regola 

@media (max-width: 480px) {
    background: red;
}

Lo sfondo sarà rosso solamente quando lo schermo avrà una larghezza più corta di 480 pixel.

Nel nostro esempio vogliamo che il numero di immagini in una riga, con la riduzione di larghezza dello schermo, passano da 4 a 3 a 2 a 1.

Per capire meglio cosa ho appena detto provate a ridimensionare la finestra del vostro browser e vedrete un cambiamento del numero di immagini in una riga della galleria esempio. Vediamo come ottenere questi breakpoint con CSS:

@media (max-width: 480px) {
.immagine{
    width: 98%;
}
}
@media (max-width: 720px) and (min-width: 480px){
.immagine{
    width: 47%;
}
}
@media (max-width: 1020px) and (min-width: 720px){
.immagine{
    width: 30%;
}
}


Ci siamo! Abbiamo ora creato una galleria immagini usando solamente codice HTML e CSS. Potete trovare il codice competo per questo tutorial su questa repository GitHub di devnews.it, siete liberi di scaricarlo e usarlo nel vostro progetto. In cambio vi chiedo solamente di condividere questa pagina con i vostri amici su Facebook o Twitter, o di metter mi piace alla nostra pagina Facebook Grazie mille e alla prossima  :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)