Similmente a quanto abbiamo visto fino ad ora, con l'elemento button possiamo creare, per il nostro tema/framework CSS, degli stili per le cards. Abbinando diverse proprietà possiamo ottenere buoni effetti di tridimensionalità o di colori, che renderanno la pagina di sicuro più gradevole e interattiva.

Il primo livello di 3D lo otteniamo creando una finta prospettiva: inclinando l'elemento di pochi gradi si può avere un buon effetto di profondità.

.card {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.card:hover {
  transform: rotateY(5deg) rotateX(10deg);
}

Questa tecnica, benchè efficace, sembra però snaturare la natura dell'elemento. Il CSS, non essendo un motore di grafica 3D, ci aiuta, ma, notiamo comunque delle perfezioni. A questo punto proviamo un'altra strategia: simuliamo l'esistenza di un piano, che è la nostra pagina web, applicando un'ombra sotto l'elemento.

.card {
  /* l'effetto di transizione deve essere su 'all' per gestire sia l'ombra che la trasformazione */
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Come ultimo punto stilistico possiamo anche colorare la card. Come per i bottoni cerchiamo di evitare di colorare la card in sè, ma di colorarne il before per una miglior gestione.

.card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 150, 255, 0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}