Come creare una card con progress bar e footer personalizzato

Introduzione
In un progetto frontend moderno, l’utilizzo di card interattive aiuta a migliorare la user experience e a presentare le informazioni in modo accattivante. Lo snippet che vedremo è un esempio concreto di come unire stile e funzionalità in un’unica interfaccia: una card con header, body, progress bar e footer personalizzato.
Questo design si presta a svariate soluzioni, come gestire anteprime di progetti, presentare task con percentuali di completamento, oppure creare sezioni di dashboard avanzate.

Attraverso questa guida imparerai a scomporre il codice HTML e CSS per comprendere come realizzare da zero una card con progress bar e pulsanti personalizzati nel footer. Vedremo nel dettaglio:

• Come è organizzata la struttura HTML
• L’architettura del CSS e l’applicazione di gradient, box-shadow e maschere
• Consigli utili su come riadattare il codice in base alle esigenze del tuo progetto

Se desideri approfondire argomenti correlati, puoi dare un’occhiata a risorse specifiche su Effetto hover avanzato su una card prodotto per scoprire nuove tecniche di animazione. Inoltre, per implementare un layout sempre più adattabile ai vari dispositivi, puoi leggere la nostra Guida al responsive design con media queries. Se invece vuoi conoscere altre animazioni e transizioni, ti consigliamo di consultare la Guida CSS Avanzato 2025: Layout, Animazioni e Best Practice.

Struttura HTML

Il markup è composto da un contenitore <section> e, al suo interno, un singolo elemento con classe .card. A seguire troviamo tre sezioni principali: .card-header, .card-body e .card-footer. Vediamole in dettaglio.

<section>
  <div class="card green">
    <div class="card-header">
      <div class="date">
        Apr 14, 2025
      </div>
      <svg ... >
        <!-- Icona per opzioni o menu -->
      </svg>
    </div>
    
    <div class="card-body">
      <h3>CyberAlchimista</h3>
      <p>Snippet</p>
      <div class="progress">
        <span>Caricamento</span>
        <div class="progress-bar"></div>
        <span>90%</span>
      </div>
    </div>

    <div class="card-footer">
      <ul>
        <li>
          <img src="..." alt="">
        </li>
        <li>
          <img src="..." alt="">
        </li>
        <a href="#" class="btn-add">
          <svg ... >
            <!-- Icona pulsante + -->
          </svg>
        </a>
      </ul>
      <a href="#" class="btn-countdown">2 giorni mancanti</a>
    </div>
  </div>
</section>

<section> e <div class="card">

• <section> funge da contenitore principale, utile per mantenere la struttura semantica.
• <div class="card green"> è la card vera e propria, con un’ulteriore classe .green per applicare uno specifico tema cromatico (in questo caso un gradiente che vira sul verde).

.card-header

• Contiene la data (.date) e un’icona SVG, potenzialmente per aprire un menu di opzioni.
• Posizionato assolutamente in alto, fornisce un header pulito e minimale.

.card-body

• Qui risiede il contenuto principale della card.
• Comprende un titolo (<h3>), un sottotitolo o descrizione (<p>) e un blocco .progress con una progress bar.
• La progress bar include due tag <span> per visualizzare lo stato testuale (Caricamento e 90%) e un div .progress-bar che visivamente mostra l’avanzamento.

.card-footer

• L’area inferiore della card, con un background dedicato e un bordo superiore (border-top) per separarla dal corpo principale.
• Comprende una lista (<ul>) di elementi: in questo caso, due immagini che potrebbero rappresentare avatar di utenti e un pulsante “+” (.btn-add).
• Un altro link (.btn-countdown) mostra un countdown o un tempo rimanente. Questo è particolarmente utile in card che indicano deadline, scadenze o progressi di progetto.

Spiegazione del CSS

Il CSS allegato è piuttosto ricco. Vediamo i punti cardine, suddivisi per macroargomenti.

Layout Generale

body{
  min-height: 100vh;
  background: #232228;
  font-family: "Nunito", sans-serif;
  display: grid;
  place-items: center;
}

• Il body utilizza display: grid e place-items: center per centrare verticalmente e orizzontalmente il contenuto.
• min-height: 100vh (o la variante 100svh nei browser più moderni) assicura che l’area copra sempre la visuale del dispositivo.

section {
  width: 100%;
  max-width: 50em;
  margin-inline: auto;
  padding: 5em 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3.25rem;
}

• La sezione principale ha un layout flessibile, con display: flex, così da poter ospitare più card affiancate se necessario.
• max-width: 50em limita la larghezza massima a circa 800px, ottimale per layout responsive.

Card e Box-Shadow

section .card {
  max-width: 20rem;
  min-height: 20rem;
  border-radius: 2.25rem;
  box-shadow: 1px 12px 25px rgba(0, 0, 0, 0.78);
  display: grid;
  place-content: center;
  place-items: center;
  position: relative;
}

• La card ha dimensioni massime di 20rem per mantenere un aspetto compatto.
• border-radius: 2.25rem crea angoli arrotondati per uno stile moderno.
• box-shadow intenso per evidenziare la card su sfondi scuri, conferendole un effetto “fluttuante”.
• L’uso congiunto di display: grid e place-items: center semplifica l’allineamento interno.

Maschere e Bordo Esterno

section .card::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.25rem;
  border: 0.155rem solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

• Questo pseudo-elemento ::before crea un bordo aggiuntivo e utilizza tecniche avanzate di mascheramento.
• Serve per ottenere un effetto di “contorno” che risalta soprattutto nei gradienti. Per approfondire i meccanismi di maschere e composizione puoi leggere Aggiungere gradienti animati con background CSS o consultare risorse come CSS Tricks.

Strutture interne: .card-header, .card-body e .card-footer

.card-header

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 0.5em 0em 1.5em;
  color: #ddd;
}

• Layout orizzontale per posizionare la data a sinistra e l’icona (svg) a destra.
• Il colore del testo è grigio chiaro (#ddd) in contrasto con lo sfondo scuro.

.card-body

.card-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• Utilizza position: absolute e transform: translate per centrare verticalmente il contenuto rispetto alla card.
• Al suo interno, la progress bar è suddivisa in etichette (span) e un contenitore (.progress-bar) che mostra la porzione completata.

.card-footer

.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 0.063rem solid #292929;
  background: #151419;
  display: flex;
  justify-content: space-between;
  padding: 0.7em 1.25em 0.5em 1.5em;
}

• Una sezione fissa in basso, con un leggero bordo superiore e un background differenziato.
• Divisa in due zone: la lista di elementi (che contiene immagini e pulsanti) a sinistra e il countdown a destra.

Temi e Gradiente .green

.green {
  background: radial-gradient(ellipse at right top, #107667ed 0%, #151419 47%, #151419 100%);
}
.green::before {
  background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #01c3a8) border-box;
}
.green .btn-add {
  background: #01c3a8;
}
.green .progress-bar:after {
  width: 90%;
  background: #01c3a8;
}
.green .btn-countdown:hover {
  background: #01c3a8;
}

• Lo sfondo .green sfrutta un gradiente radiale per creare una sfumatura che parte dal verde e sfuma verso il grigio scuro (#151419).
• Il pseudo-elemento ::before aggiunge un gradient trasparente con riflessi di colore.
• Gli elementi .btn-add, .progress-bar:after, e .btn-countdown:hover ereditano il tema di base, in questo caso un verde vivace (#01c3a8).

Animazioni o Effetti Particolari

Sebbene il codice mostrato non contenga animazioni esplicite con @keyframes, l’effetto di hover che cambia il background della .btn-countdown è una forma di transizione visiva. Se volessi aggiungere transizioni più morbide, potresti inserire:

.btn-countdown {
  transition: background 0.3s ease;
}

Interazioni Visive (Hover, Progress, Bottoni)

1. Progress Bar
   • La larghezza della barra interna è definita in .green .progress-bar:after { width: 90%; }, riflettendo il 90% di completamento.
   • Per renderla animata, potresti aggiungere: cssCopiaModifica.progress-bar:after { transition: width 0.5s ease-in-out; } In questo modo, il caricamento da una percentuale all’altra sarebbe fluido.
2. Bottoni
   • .btn-add è un’icona circolare con un simbolo “+”. Potresti usarla per aggiungere un nuovo elemento o avviare un workflow.
   • .btn-countdown mostra un testo (“2 giorni mancanti”): puoi cambiarlo dinamicamente in base a script JavaScript che calcola il tempo rimanente a un evento.
3. Hover e Focus
   • Gli stili :hover, :focus e :active non sono molto estesi nello snippet, ma costituiscono un ottimo punto di partenza per migliorarne l’accessibilità.
   • Considera l’uso di outline e focus state per rendere la card navigabile con tastiera, seguendo le best practice di accessibilità su MDN.

Best Practice e Modifiche Consigliate

1. Accessibilità
   • Aggiungi testo alternativo descrittivo alle immagini.
   • Prevedi attributi aria-label o aria-hidden (a seconda del contesto) sulle icone SVG per migliorare la lettura degli screen reader.
   • Se vuoi approfondire l’argomento, dai un’occhiata a Come usare aria-label e aria-hidden per migliorare l’accessibilità.
2. Responsiveness
   • La card è già abbastanza responsiva, ma se desideri avere un layout a griglia con più card, assicurati di utilizzare media queries per gestire la dimensione di .card.
   • Esempio: cssCopiaModifica@media (max-width: 600px) { .card { min-width: 100%; max-width: 100%; } }
   • Per un approfondimento, consulta la Guida al responsive design con media queries.
3. Personalizzazione Tema
   • Crea più classi di tema (es. .blue, .orange, .purple) replicando la struttura .green. Basta cambiare i gradienti e i colori principali per ottenere un set di card personalizzate.
4. Pseudoelementi e Maschere
   • Se non sei interessato a effetti di contorno avanzati, potresti rimuovere o semplificare la parte di codice che usa mask-composite. Ciò migliora la compatibilità con browser più vecchi, mantenendo intatta la funzionalità di base.
5. Performance
   • Minimizza e raggruppa CSS e SVG se stai integrando lo snippet in un progetto più grande.
   • Se usi immagini ad alta risoluzione come avatar, considera il caricamento lazy o immagini di dimensioni ridotte per performance migliori.

Per sperimentare varianti o altri effetti, potresti creare una demo su CodePen o ispirarti alla nostra Animazioni CSS moderne: guida pratica per aggiungere transizioni e keyframe più complesse.

Conclusioni

Questo snippet HTML + CSS dimostra come creare una card UI moderna e funzionale, con un header minimal, un corpo centrale in cui evidenziare un contenuto significativo (ad esempio un titolo e una progress bar) e un footer ricco di interazioni (immagini profilo, pulsanti d’azione e countdown). La struttura modulare del codice permette di adattare facilmente colori, gradienti e dimensioni, mentre l’aggiunta di microinterazioni (animazioni hover, transizioni sulla progress bar) rende l’esperienza più dinamica e appagante.

Applicazioni pratiche?

• Dashboard di project management: per mostrare task con scadenze e percentuali di avanzamento.
• Sezioni di portfolio: per sottolineare lo stato di un progetto in corso o i progressi fatti.
• Applicazioni web con scadenze: per segnalare eventi imminenti o coupon in scadenza in un e-commerce.

Se vuoi approfondire ulteriormente l’argomento o scoprire altri effetti avanzati, dai un’occhiata a Realizzare un Effetto Hover Avanzato per una Card Prodotto con HTML e CSS oppure esplora le nostre risorse su Guida al responsive design con media queries. E se cerchi altri spunti sul mondo delle animazioni, puoi consultare la Guida CSS Avanzato 2025.

Buon coding!