Quando si realizza un sito web professionale, uno degli elementi più importanti è la capacità di organizzare e mostrare i contenuti in modo chiaro, ordinato e facilmente navigabile. Questo è particolarmente vero per portfolio creativi, raccolte di progetti, gallery fotografiche o sezioni dedicate ai lavori svolti. Una semplice griglia di immagini, infatti, spesso non basta. L'utente deve poter filtrare rapidamente ciò che gli interessa senza scorrere l'intera pagina.
In questa guida vedremo come creare una galleria filtrabile con effetto portfolio utilizzando HTML, CSS e JavaScript. Partiremo da una struttura semplice fino ad arrivare a un risultato dinamico e professionale.
Realizzeremo pulsanti di filtro interattivi e un sistema di visualizzazione fluido. Il tutto senza l'utilizzo di librerie esterne, così da comprendere a fondo il funzionamento della logica che sta dietro a questo tipo di interazione.
Quali linguaggi serviranno per l'effetto Portfolio?
Per realizzare la nostra galleria filtrabile utilizzeremo tre tecnologie fondamentali dello sviluppo front-end: HTML per la struttura dei contenuti, CSS per lo stile grafico e la disposizione degli elementi in griglia, e JavaScript per gestire la logica di filtro e rendere la galleria interattiva. Non utilizzeremo librerie o framework esterni: tutto sarà sviluppato in modo "vanilla", così da comprendere chiaramente ogni passaggio del processo.
Nel risultato finale avremo una sezione in stile portfolio composta da una griglia di elementi (ad esempio immagini o card progetto) e una serie di pulsanti posti nella parte superiore. Cliccando su ciascun pulsante, verranno mostrati solo gli elementi appartenenti alla categoria selezionata, mentre gli altri verranno nascosti con un effetto fluido e professionale. Questo tipo di struttura è perfetto per diversi tipi di siti web che desiderano organizzare i propri lavori per categorie come "Web Design", "Grafica", "Branding" o "Fotografia".
La struttura HTML
Partiamo dalla base di tutto: la struttura HTML. In questa fase andremo a creare:
- Un contenitore principale per la sezione portfolio.
- I pulsanti di filtro.
- La griglia con gli elementi da filtrare.
Ogni elemento della galleria avrà una classe comune e una classe specifica di categoria, così da permettere a JavaScript di capire quali elementi mostrare o nascondere.
<body>
<section class="portfolio">
<h2>I Nostri Progetti</h2>
<!-- Pulsanti di Filtro -->
<div class="filter-buttons">
<button data-filter="all" class="active">Tutti</button>
<button data-filter="web">Web Design</button>
<button data-filter="grafica">Grafica</button>
<button data-filter="foto">Fotografia</button>
</div>
<!-- Griglia Portfolio -->
<div class="gallery">
<div class="item web">
<img src="https://via.placeholder.com/300" alt="Progetto Web" />
</div>
<div class="item grafica">
<img src="https://via.placeholder.com/300" alt="Progetto Grafica" />
</div>
<div class="item foto">
<img
src="https://via.placeholder.com/300"
alt="Progetto Fotografia"
/>
</div>
<div class="item web">
<img src="https://via.placeholder.com/300" alt="Progetto Web" />
</div>
<div class="item grafica">
<img src="https://via.placeholder.com/300" alt="Progetto Grafica" />
</div>
</div>
</section>
</body>Il codice CSS
Ora che abbiamo definito la struttura HTML, è il momento di trasformarla in una vera galleria portfolio dal design moderno e ordinato. Con il CSS andremo a:
- Creare una griglia responsive.
- Stilizzare i pulsanti di filtro.
- Aggiungere una transizione fluida per mostrare e nascondere gli elementi.
.portfolio {
padding: 50px 20px;
text-align: center;
}
.portfolio h2 {
margin-bottom: 30px;
font-size: 2rem;
}
/* Pulsanti filtro */
.filter-buttons {
margin-bottom: 40px;
}
.filter-buttons button {
padding: 10px 20px;
margin: 5px;
border: none;
background-color: #333;
color: #fff;
cursor: pointer;
transition: 0.3s ease;
border-radius: 5px;
}
.filter-buttons button:hover {
background-color: #555;
}
.filter-buttons button.active {
background-color: #007bff;
}
/* Griglia gallery */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.item {
overflow: hidden;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.item img {
width: 100%;
display: block;
border-radius: 8px;
}
/* Classe per nascondere elementi */
.item.hide {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}Cosa fa questo CSS?
- Viene creata una griglia responsive grazie a display: grid e auto-fit, che permette agli elementi di adattarsi automaticamente alla larghezza dello schermo.
- I pulsanti sono stati stilizzati con hover e una classe active per evidenziare il filtro selezionato.
- Viene aggiunta una transizione fluida agli elementi .item, così quando verranno nascosti o mostrati l'effetto sarà graduale e professionale.
- La classe .hide sarà fondamentale: verrà aggiunta o rimossa tramite JavaScript per controllare la visibilità degli elementi.
Il codice JavaScript per l'effetto Portfolio?
Arriviamo ora alla parte più importante: rendere la galleria realmente interattiva. Con JavaScript andremo a:
- Selezionare tutti i pulsanti di filtro.
- Selezionare tutti gli elementi della galleria.
- Mostrare o nascondere gli elementi in base alla categoria cliccata.
- Gestire la classe active del pulsante selezionato.
const filterButtons = document.querySelectorAll(".filter-buttons button");
const items = document.querySelectorAll(".item");
filterButtons.forEach((button) => {
button.addEventListener("click", () => {
// Rimuove la classe active da tutti i pulsanti
filterButtons.forEach((btn) =>
btn.classList.remove("active")
);
button.classList.add("active");
const filterValue = button.getAttribute("data-filter");
items.forEach((item) => {
if (filterValue === "all" || item.classList.contains(filterValue)) {
item.classList.remove("hide");
} else {
item.classList.add("hide");
}
});
});
});Come funziona questo script? Selezioniamo gli elementi:
- filterButtons contiene tutti i pulsanti.
- items contiene tutti gli elementi della galleria.
Aggiungiamo un evento click a ogni pulsante:
- Quando l'utente clicca, viene eseguita la funzione associata.
Gestione stato attivo:
- Rimuoviamo la classe active da tutti i pulsanti.
- La aggiungiamo solo a quello cliccato.
Filtro dinamico:
- Recuperiamo il valore dell'attributo data-filter.
- Se il valore è "all" mostriamo tutti gli elementi.
- Altrimenti mostriamo solo quelli che contengono la classe corrispondente.
- Gli elementi non corrispondenti ricevono la classe hide, che li rende invisibili con un'animazione fluida grazie al CSS.
Analisi e commento del risultato finale
Una volta uniti HTML, CSS e JavaScript, il risultato sarà una galleria portfolio filtrabile completamente dinamica. L'utente potrà cliccare sui pulsanti di categoria e visualizzare istantaneamente solo i progetti desiderati, senza ricaricare la pagina.
L'effetto visivo risulta fluido e professionale grazie alle transizioni CSS applicate agli elementi della griglia: quando un elemento viene filtrato, non scompare bruscamente ma si ridimensiona e svanisce gradualmente. Questo dettaglio migliora notevolmente la percezione di qualità dell'interfaccia.
Dal punto di vista tecnico, la soluzione è:
- ✅ Leggera (nessuna libreria esterna).
- ✅ Facile da personalizzare.
- ✅ Scalabile (basta aggiungere nuove categorie e nuovi elementi).
- ✅ Responsive, grazie all'utilizzo di CSS Grid.
Questo tipo di struttura è ideale per portfolio di sviluppatori, designer, fotografi, agenzie creative o per qualsiasi sito che necessiti di organizzare contenuti per categoria in modo ordinato e interattivo.
Conclusione
Creare una galleria filtrabile con HTML, CSS e JavaScript è un ottimo esercizio per comprendere come struttura, stile e logica possano lavorare insieme per realizzare un'interfaccia moderna e funzionale. Con poche decine di righe di codice siamo riusciti a costruire un sistema dinamico, elegante e facilmente adattabile a qualsiasi progetto web.
Uno dei principali vantaggi di questa soluzione è la sua semplicità: non abbiamo utilizzato librerie esterne né framework complessi, ma solo JavaScript "vanilla". Questo significa maggiore controllo sul codice, migliori prestazioni e una più profonda comprensione del meccanismo di filtraggio basato su classi e attributi personalizzati.
Naturalmente, questa galleria può essere ulteriormente migliorata: puoi aggiungere animazioni più elaborate, effetti hover sulle immagini, overlay con descrizioni dei progetti, oppure integrare un sistema di caricamento dinamico dei contenuti.
Ma già in questa versione rappresenta una base solida e professionale per qualsiasi sito portfolio.
