CSS Tricks, parte due

Ciao! Continuiamo la nostra raccolta di trucchetti CSS utili per creare layout più interessanti e funzionali.

Card con la stessa altezza

Quando lavoriamo con card che contengono contenuti di lunghezza variabile, spesso ci troviamo con altezze diverse che rendono il layout disordinato. Grazie a Flexbox possiamo uniformare tutto facilmente.

Per questo esempio uso Bulma.io, un framework CSS che adoro per la sua semplicità e leggerezza.

Il problema:

<div class="container">
  <div class="columns is-multiline">
    <div class="column is-4">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <img
              src="https://bulma.io/assets/images/placeholders/1280x960.png"
              alt="Placeholder image"
            />
          </figure>
        </div>
        <div class="card-content">
          <div class="content">
            <h1 class="title is-size-5">Lorem ipsum dolor sit amet</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
              natoque penatibus et magnis dis.
            </p>
            <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
          </div>
        </div>
        <footer class="card-footer">
          <a href="#" class="card-footer-item">Save</a>
          <a href="#" class="card-footer-item">Edit</a>
          <a href="#" class="card-footer-item">Delete</a>
        </footer>
      </div>
    </div>
    <!-- Altre card qui -->
  </div>
</div>

Come puoi vedere dall'immagine, il titolo della seconda card è più lungo e genera un'altezza diversa, creando un layout scomposto.

La soluzione:

Con poche righe di CSS risolviamo tutto usando Flexbox:

.equalheight {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equalheight .card-footer {
  margin-top: auto;
}

Applichiamo la classe alla card:

<div class="card equalheight">
  <!-- contenuto card -->
</div>

In poche parole:

display: flex con flex-direction: column trasforma la card in un contenitore flessibile verticale
height: 100% fa sì che la card occupi tutta l'altezza disponibile della colonna
margin-top: auto sul footer lo "spinge" automaticamente verso il basso, indipendentemente dal contenuto sopra

Risultato: tutte le card hanno la stessa altezza e i footer sono perfettamente allineati!

Card con immagine di sfondo e overlay

Creiamo una card più elaborata con immagine di sfondo, gradiente overlay e contenuto sovrapposto. Perfetta per hero section o card in evidenza.

HTML:

<div class="imgbox">
  <img src="gj-vintage-post.png" alt="Background" />
  <div>
    <h1 class="title is-size-4">LOREM IPSUM DOLOR LOREM</h1>
    <p>Lorem ipsum dolor lorem ipsum lorem ipsum dolor lorem ipsum.</p>
    <button class="button is-primary is-fullwidth is-rounded">
      Click me
    </button>
  </div>
</div>

CSS:

.imgbox {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #13315d;
  border-radius: 20px;
  overflow: hidden;
}

.imgbox::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
}

.imgbox img {
  position: absolute;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 0;
}

.imgbox div {
  position: absolute;
  bottom: 10px;
  padding: 1.5rem;
  width: 100%;
  z-index: 2;
}

.imgbox .title {
  color: #fff;
  margin-bottom: 0.8rem;
}

.imgbox p {
  color: #d6d9e0;
  margin-bottom: 1.2rem;
}

In poche parole:

Creiamo tre livelli sovrapposti usando position: absolute e z-index:

Livello 0 (fondo) - L'immagine con object-fit: cover riempie il box mantenendo le proporzioni, opacity: 0.5 la rende semi-trasparente
Livello 1 (mezzo) - Lo pseudo-elemento ::before aggiunge un gradiente scuro che sfuma dall'alto (trasparente) verso il basso (nero al 75%), migliorando la leggibilità del testo
Livello 2 (sopra) - Il div con il contenuto si posiziona in basso grazie a bottom: 10px, rimanendo sempre leggibile sopra il gradiente

Il position: relative sul contenitore .imgbox crea il riferimento per il posizionamento assoluto degli elementi interni.

Bordi con gradiente

I bordi con gradiente aggiungono un tocco di classe. Ecco tre approcci diversi per ottenere effetti diversi:

/* Bordo gradiente con angoli arrotondati */
.bordergradient-rounded {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #ff0000, #9932cc) border-box;
  border-radius: 20px;
  border: 4px solid transparent;
}

/* Bordo gradiente su lati destro e sinistro */
.bordergradient-leftright {
  border-width: 0 4px;
  border-style: solid;
  border-image: linear-gradient(to right, #ff0000, #9932cc) 1;
}

/* Bordo gradiente solo in basso */
.bordergradient-bottom {
  border-width: 0 0 4px 0;
  border-style: solid;
  border-image: linear-gradient(to right, #ff0000, #9932cc) 1;
}