CSS - Galleria Immagini

Benvenuti, aspiranti web designer! Oggi ci immergeremo nel mondo emozionante delle Gallerie Immagini CSS. Come il vostro amico insegnante di informatica del vicinato, sono entusiasta di guidarvi in questo viaggio. Trasformeremo insieme quelle noiose immagini statiche in gallerie accattivanti e interattive che faranno risplendere i vostri siti web!

CSS - Image Gallery

Galleria Immagini Semplice

Iniziamo dalle basi. Una galleria immagini semplice è come appendere foto sulla parete - si tratta tutto della presentazione. Ecco come possiamo crearne una utilizzando CSS:

<div class="gallery">
<img src="image1.jpg" alt="Immagine 1">
<img src="image2.jpg" alt="Immagine 2">
<img src="image3.jpg" alt="Immagine 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

In questo esempio, utilizziamo flexbox per creare un layout responsive. La proprietà flex-wrap: wrap garantisce che le nostre immagini si avvolgeranno sulla riga successiva se non c'è abbastanza spazio. justify-content: center centra le nostre immagini orizzontalmente.

Galleria Immagini con Effetto Hover

Ora, aggiungiamo un po' di interattività! Gli effetti hover possono rendere la vostra galleria più coinvolgente. È come aggiungere un messaggio segreto che appare solo quando si guarda da vicino.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Immagine 1">
<div class="overlay">
<div class="text">Ciao Mondo</div>
</div>
</div>
<!-- Ripetere per altre immagini -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Questo CSS crea una sovrapposizione che appare quando si passa sopra un'immagine. La proprietà transition gli conferisce un effetto di sfumatura dolce.

Galleria Immagini Responsive Utilizzando Media Query

Nel mondo odierno dei multi-dispositivi, la reattività è fondamentale. Ecco come possiamo adattare la nostra galleria a diverse dimensioni di schermo:

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

Questo CSS utilizza CSS Grid per creare un layout responsive. La funzione minmax garantisce che le nostre immagini siano alte almeno 200px, ma possono crescere se c'è spazio a disposizione. Le media query adattano il layout per schermi più piccoli.

Sintassi

Prendiamo un momento per comprendere la sintassi che abbiamo utilizzato. Le proprietà CSS seguono questa struttura:

selettore {
proprietà: valore;
}

Ecco una tabella delle proprietà CSS comuni utilizzate nelle gallerie immagini:

Proprietà	Descrizione	Esempio
display	Specifica il comportamento di visualizzazione	`display: flex;`
width	Imposta la larghezza di un elemento	`width: 200px;`
height	Imposta l'altezza di un elemento	`height: 200px;`
margin	Imposta i margini di un elemento	`margin: 10px;`
object-fit	Specifica come un'immagine deve essere ridimensionata	`object-fit: cover;`
position	Specifica il metodo di posizionamento utilizzato	`position: relative;`
opacity	Imposta il livello di opacità per un elemento	`opacity: 0;`
transition	Specifica l'effetto di transizione	`transition: 0.5s ease;`

Galleria Immagini con Scorrimento Orizzontale

A volte, si desidera che la galleria scorra orizzontalmente. È come una pellicola che si può scorrere:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Immagine 1">
<img src="image2.jpg" alt="Immagine 2">
<!-- Aggiungere altre immagini se necessario -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

Questo CSS crea una galleria che si può scorrere orizzontalmente. La proprietà overflow-x: auto aggiunge una barra di scorrimento orizzontale quando necessario.

Galleria Immagini con Scorrimento Verticale

Le gallerie con scorrimento verticale sono fantastiche per mostrare un gran numero di immagini in uno spazio compatto:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Immagine 1">
<img src="image2.jpg" alt="Immagine 2">
<!-- Aggiungere altre immagini se necessario -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

Questo CSS crea una galleria con scorrimento verticale. La proprietà overflow-y: scroll aggiunge una barra di scorrimento verticale.

Galleria Immagini con CSS Grid

CSS Grid è uno strumento potente per creare layout complessi. Ecco come possiamo utilizzarlo per creare una galleria dinamica:

<div class="grid-gallery">
<img src="image1.jpg" alt="Immagine 1">
<img src="image2.jpg" alt="Immagine 2">
<img src="image3.jpg" alt="Immagine 3">
<img src="image4.jpg" alt="Immagine 4">
<img src="image5.jpg" alt="Immagine 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

Questo CSS crea un layout a griglia dove alcune immagini occupano più colonne o righe, creando un layout più dinamico.

Galleria Immagini con Schede

Le gallerie con schede sono un ottimo modo per organizzare diversi set di immagini:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Natura</button>
<button class="tablinks" onclick="openTab(event, 'City')">Città</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Natura 1">
<img src="nature2.jpg" alt="Natura 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="Città 1">
<img src="city2.jpg" alt="Città 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Questo CSS crea un'interfaccia a schede. Avrete bisogno di un po' di JavaScript per renderla funzionante:

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

Galleria Immagini con Slider

Creiamo una semplice presentazione:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Avrete bisogno di un po' di JavaScript per controllare la presentazione:

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Cambiare immagine ogni 2 secondi
}

Galleria Immagini con Presentazione e Miniature

Infine, combiniamo la nostra presentazione con miniature per un'esperienza più interattiva:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

Dovrete modificare il JavaScript per gestire i clic sulle miniature:

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Ecco lì! Abbiamo coperto una vasta gamma di tecniche per le gallerie immagini CSS. Ricorda, la pratica rende perfetti. Prova a combinare queste tecniche per creare le tue gallerie uniche. Buon coding!

Credits: Image by storyset