Creare una card in CSS: tutorial Card UI passo passo

In questo tutorial ti mostro come realizzare una scheda («card» in inglese). Una card serve a mostrare all’utente l’estratto di un articolo con la sua immagine, per invogliarlo a cliccare sull’articolo e a leggerlo. Realizzata solo con HTML e CSS. Ho voluto usare una proprietà poco sfruttata in CSS, la proprietà filter, che permette di applicare un trattamento a un’immagine, e ho aggiunto anche una transizione per darle dinamismo.

See the Pen
Card UI CSS by Damien Flandrin (@dam62500)
on CodePen.

Passo 1 – Schematizzare e scrivere il codice HTML

Per scrivere il codice HTML devi prima immaginarne la struttura. Quando hai un mockup, prenditi il tempo di ragionare sulla struttura del tuo sito o dei tuoi moduli CSS. Non esitare a fare degli schizzi su un foglio per schematizzarla. Un codice HTML ben strutturato ti semplificherà tutto lo sviluppo che viene dopo!

<div class="card">
    <a href="https://www.gekkode.com/it/blog/post/#">
        <!-- Image à la une -->
        <div class="card-image"><img src="https://www.gekkode.com/wp-content/uploads/2021/08/orange.jpeg" alt="Orange" /></div>
        <!-- Fin de l'image à la une -->

<!-- Corp de notre carte -->
        <div class="card-body">

<!-- Date de publication de l'article-->
            <div class="card-date">
                <time>20 Novembre 1992</time>
            </div>

<!-- Titre de l'article -->
            <div class="card-title">
                <h3>Lorem Ipsum</h3>
            </div>
            <!-- Extrait de l'article -->
            <div class="card-excerpt">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus autem consectetur voluptate facere at, omnis ab optio placeat officiis! Animi modi harum enim quia veniam consectetur unde autem inventore.</p>
            </div>

</div>
        <!-- Fin du corp de notre carte -->
    </a>
</div>

Passo 2 – Definire le regole di base e dare uno stile al modulo

Una volta poste le basi dell’HTML, passiamo al CSS. Per farlo riprendiamo una a una le parti dello schema.

Questo stile si scrive altrettanto bene in SCSS, con una variabile per il colore dell’ombra e l’annidamento per lo stato di hover. Serve però un passaggio di compilazione: vedi compilare SCSS in una build Webpack.

.card

.card {
  width: 400px; /*1*/
  margin: 0px auto; /*2*/
  background-color: white; /*3*/
  box-shadow: 0px 5px 20px #999; /*4*/
}
.card a { /*5*/
  color: #333;
  text-decoration: none;
}
.card:hover .card-image img { /*6*/
  width: 160%;
  filter: grayscale(0);
}

1. Diamo una dimensione fissa alla card.
2. La centriamo con margin: 0px auto, facendo attenzione a essere in display: block.
3. La mettiamo in bianco: di default ho dato al body uno sfondo leggermente più scuro, così la card si stacca bene dal corpo della pagina.
4. Le aggiungiamo una piccola ombra per creare un effetto di sovrapposizione rispetto alla pagina.
5. Definiamo lo stile di base dei link dentro il modulo .card.
6. Per dare dinamismo, come dicevo prima, diciamo al browser che quando il visitatore passa sopra la card questa si allarga tramite width e i colori tornano visibili, perché di default applicheremo un filtro in bianco e nero all’immagine a partire da .card-image.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Metodo di centratura in base alla dimensione dell'immagine */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Transizione */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. Fissiamo la dimensione del blocco che conterrà l’immagine: una dimensione fissa ci permette di tenere le immagini tutte della stessa misura quando le card sono più di una.
2. Mettiamo la posizione dell’elemento su relative, perché conterrà elementi in absolute.
3. Nascondiamo tutto quello che può debordare dal blocco.
4. Fissiamo la dimensione dell’immagine al 100%. Puoi aumentare la dimensione di default secondo le tue esigenze, ma non usare immagini sotto i 400px e ricordati di rispettarne il rapporto larghezza/altezza per evitare bordi bianchi.
5. Il metodo che vedi qui serve a centrare un’immagine rispetto alla propria dimensione e al proprio elemento padre. L’obiettivo è che il punto d’origine della visualizzazione sia il centro di .card-image, poi con transform ne ridefiniamo la posizione in base alla dimensione dell’immagine, per averla ben centrata in .card-image.
6. la proprietà filter permette di applicare un filtro a un’immagine: qui vogliamo applicare di default un filtro in bianco e nero grayscale, per poi restituire i colori quando l’utente passa sopra la card.
7. Per dare dinamismo applichiamo alle due proprietà filter e width una transizione di 300ms.

.card-body

.card-body {
    text-align:center;  /*1*/
  padding: 15px 20px; /*2*/
  box-sizing: border-box; /*3*/
}

1. Allineiamo tutti gli elementi dentro .card-body.
2. Per evitare che gli elementi restino attaccati, aggiungiamo un’imbottitura con la proprietà padding.
3. Poi applichiamo, se non è già il comportamento di default, box-sizing con il valore border-box, così il padding è compreso nel blocco e non si somma a esso.

La tipografia

.card-date {
  font-family: 'Source Sans Pro', sans-serif;
}

.card-title, .card-excerpt {
   font-family: 'Playfair Display', serif;
}

.card-date, .card-title {
  text-align:center;
  text-transform:uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}

Come avrai capito, qui definiamo lo stile del testo: ho usato Source Sans Pro sans-serif e Playfair Display serif come font, più qualche aggiustamento di formattazione per il testo.