Les ombres portées

jdb-card

Avec JdB.CSS, vous pouvez également ajouter ou supprimer rapidement une ombre avec les classes utilitaires jdb-card.

Il est inutile et déconseillé d'utiliser plusieurs classes pour un même élément. Une seule classe lui sera appliqué.

Ombres par défaut

Aucune ombre
Ombre de niveau 2
Ombre de niveau 4
Ombre de niveau 8
Ombre de niveau 12
Ombre de niveau 16
Ombre de niveau 24

Code :

<div class="jdb-container jdb-card-12">
  <p>Ombre de niveau 12</p>
</div>

Ombres au survol du curseur

Les classes jdb-hover-card-x ajoute un effet d'ombre au survol du curseur. Elles peuvent s'appliquer à n'importe quel élément HTML.

 Aucune ombre
.jdb-hover-none
 Ombre de niveau 2
.jdb-hover-card-2
 Ombre de niveau 4
.jdb-hover-card-4
 Ombre de niveau 8
.jdb-hover-card-8
 Ombre de niveau 12
.jdb-hover-card-12
 Ombre de niveau 16
.jdb-hover-card-16
 Ombre de niveau 24
.jdb-hover-card-24

Code :

<div class="jdb-container jdb-hover-card-12">
  <p>Ombre de niveau 12</p>
</div>

Bouton avec ombre par défaut

Code :

<a class="jdb-btn jdb-blue jdb-round-xxl" href="/boutons">
  <i class="fa fa-info-circle" aria-hidden="true"></i> En savoir plus
</a>